/* The pages that give each lesson, resource and topic its own address (built by build-search-pages.js).
   Same look as the rest of the site; the cards are the lesson pack cards from the home page. */
html,body{margin:0;color:#111111;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{min-height:100vh;display:flex;flex-direction:column;font-family:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;background-color:#F5F0E8;
  background-image:linear-gradient(rgba(215,201,171,.65) 1px,transparent 1px),linear-gradient(90deg,rgba(215,201,171,.65) 1px,transparent 1px),linear-gradient(rgba(227,217,195,.65) 1px,transparent 1px),linear-gradient(90deg,rgba(227,217,195,.65) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
:focus-visible{outline:2px solid #D46479;outline-offset:3px}
a{color:#111111;text-decoration-color:#E8788E;text-decoration-thickness:2px;text-underline-offset:.2em}
.top{padding:22px max(20px,4.17vw) 0}
.pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:2px solid #111111;border-radius:100px;background:#FFFDF9;color:#111111;font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,transform .1s ease-out}
.pill:hover{background:#E8788E;color:#111111}
main{flex:1;width:min(860px,100%);margin:0 auto;padding:clamp(32px,5vw,64px) 20px clamp(56px,7vw,96px)}
main.wide{width:min(1180px,100%)}
.kicker{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5A544C}
.kicker a{display:inline-block;padding:14px 0;margin:-14px 0;color:#111111}
h1{margin:0;font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(36px,5.4vw,64px);line-height:1.05;letter-spacing:-.005em;text-wrap:balance}
h1 span,.tmh-bcard h3 span,.tmh-lesson-t span{display:block}
.rule{display:block;width:min(240px,42%);height:7px;margin:18px 0 26px;border-top:2px solid #E8788E;border-bottom:2px solid #E8788E}
.blurb{margin:0 0 30px;max-width:62ch;font-size:clamp(17px,1.6vw,19px);line-height:1.5}
/* the sentence under a title that says what it is, the level, the topic and the spec code */
.about{margin:-14px 0 30px;max-width:66ch;font-size:15px;line-height:1.55;color:#5A544C}
.about a{color:#5A544C;font-weight:600}
.about.lead{margin:0 0 26px;font-size:clamp(16px,1.5vw,18px)}
h2{margin:44px 0 14px;font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.15}
h3{margin:26px 0 4px;font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(18px,1.9vw,21px);line-height:1.25}
.links{margin:0;padding:0;list-style:none}
.links li{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:baseline;padding:11px 0;border-top:1px solid #E3D9C3;font-size:clamp(17px,1.6vw,19px);line-height:1.35}
.links a{display:block;padding:11px 0;margin:-11px 0;font-weight:600}
.links span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#5A544C;white-space:nowrap}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.all{display:inline-block;margin:5px 0 -11px;padding:11px 0;font-weight:700}
footer{background:#111111;color:#F5F0E8;padding:36px max(20px,4.17vw)}
footer span{font-family:'Caveat',cursive;font-weight:600;font-size:30px;color:#E8788E;line-height:1}

/* lesson pack cards */
.tmh-bundle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:max(16px,1.8vw)}
.tmh-bcard{display:flex;flex-direction:column;gap:12px;min-width:0;background:#FFFDF9;border:2px solid #111111;border-radius:14px;padding:16px 16px 18px}
.tmh-bcard-pic{aspect-ratio:4/3;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding-top:16px;background:#F3DEDA;border-radius:8px}
.tmh-bcard-pic.deck{align-items:center;padding:0}
.tmh-lesson{position:relative;container-type:inline-size;display:block;aspect-ratio:16/9;background:#FFFDF9;border:2px solid #111111;border-radius:14px;color:#111111;text-decoration:none;box-shadow:5px 5px 0 #F3DEDA;transition:transform .3s cubic-bezier(.25,1,.5,1),box-shadow .3s cubic-bezier(.25,1,.5,1)}
.tmh-lesson-t{position:absolute;left:7%;right:7%;top:46%;transform:translateY(-50%);font-family:'Playfair Display',serif;font-weight:800;font-size:9cqw;line-height:1.08;text-wrap:balance}
.tmh-lesson-b{position:absolute;right:5%;bottom:6%;font-family:'Caveat',cursive;font-weight:600;font-size:6.5cqw;line-height:1;color:#D46479}
.tmh-bcard-pic.deck .tmh-lesson{width:84%;box-shadow:4px 4px 0 #E8788E}
.tmh-bcard-pic.deck .tmh-lesson:hover,.tmh-bcard-pic.deck .tmh-lesson:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #111111}
.tmh-bcard-pic.video{align-items:center;padding:0}
.tmh-video{display:flex;align-items:center;justify-content:center;height:80%;aspect-ratio:9/16;background-color:#F5F0E8;background-image:linear-gradient(to right,#E3D9C3 1px,transparent 1px),linear-gradient(to bottom,#E3D9C3 1px,transparent 1px);background-size:14px 14px;border:2px solid #111111;border-radius:10px;box-shadow:4px 4px 0 #E8788E;color:#111111;transition:transform .3s cubic-bezier(.25,1,.5,1),box-shadow .3s cubic-bezier(.25,1,.5,1)}
.tmh-video:hover,.tmh-video:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #111111}
.tmh-video svg{width:44%;height:auto}
.tmh-bpaper{position:relative;width:72%;flex:none;transform:rotate(-2.5deg);background:#FFFDF9;border:1px solid #D7C9AB;border-radius:3px;box-shadow:0 1px 0 rgba(17,17,17,.05),0 6px 14px rgba(17,17,17,.09);overflow:hidden}
.tmh-bpaper img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.tmh-bcard-k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#5A544C}
.tmh-bcard h3{margin:0;font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(19px,1.7vw,22px);line-height:1.15;text-wrap:balance}
.tmh-bcard-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.tmh-bbtn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border:2px solid #111111;border-radius:100px;background:#FFFDF9;color:#111111;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,transform .1s ease-out}
.tmh-bbtn.k{background:#111111;color:#F5F0E8}
.tmh-bbtn.r{background:#E8788E;border-color:#E8788E;color:#FFFFFF}
.tmh-bbtn:hover,.tmh-bbtn:focus-visible{background:#E8788E;border-color:#111111;color:#111111}
.tmh-bbtn.r:hover,.tmh-bbtn.r:focus-visible{background:#111111;color:#F5F0E8}
/* press: answers the moment a finger or mouse goes down */
.pill:active,.tmh-bbtn:active,.tmh-bbtn.r:active{transform:scale(.96)}
.tmh-bcard-pic.deck .tmh-lesson:active,.tmh-video:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #111111;transition-duration:.1s}
@media (max-width:560px){.links li{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pill,.tmh-lesson,.tmh-video,.tmh-bbtn{transition:none}}