/* 教学与课程 · blackboard and answer sheet.
   The title is chalked onto the board as the page opens; the text is written on ruled answer paper,
   and the teacher's asides are in red pen. */

.w-teach {
  --bg: #DCE1DA; --paper: #FCFCF9; --ink: #1F2A26; --muted: #56625D; --line: rgba(31, 42, 38, .16);
  --acc: #2F6B55; --acc-ink: #FFFFFF; --chalk: #F1F0E8; --chalk-y: #F2D16B; --pen: #C8102E; --rule: #C8D6E6;
  --f-hand: "YH Gu Hand", "Long Cang", var(--f-serif); --f-body: var(--f-serif);
  background: #DCE1DA url("../img/tex-grain.png");
}
.w-teach .bar { background: rgba(220, 225, 218, .93); }
.w-teach .bar__nav .nav__a[aria-current="page"] { border-bottom-color: var(--pen); }
.w-teach .prog i { background: var(--pen); }

/* ---------- hero: the board ---------- */
.w-teach .ah { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding-top: 52px; }
.w-teach .board {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center;
  padding: 54px 60px 70px; color: var(--chalk);
  background: linear-gradient(rgba(36, 69, 58, .62), rgba(36, 69, 58, .62)), #24453A url("../img/tex-chalk.png");
  border: 16px solid #7B5232; border-bottom-width: 22px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3), inset 0 0 60px rgba(0, 0, 0, .35), 0 24px 40px -20px rgba(0, 0, 0, .45);
}
.w-teach .board::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -22px; height: 12px; background: linear-gradient(#8C6040, #5C3D26); box-shadow: 0 4px 6px rgba(0, 0, 0, .3); }
.w-teach .chalks { position: absolute; z-index: 1; bottom: -18px; left: 14%; display: flex; gap: 14px; align-items: flex-end; }
.w-teach .chalks i { display: block; width: 34px; height: 9px; border-radius: 3px; background: #F4F2EA; box-shadow: inset -3px 0 0 rgba(0, 0, 0, .08); }
.w-teach .chalks i:nth-child(2) { width: 22px; background: var(--chalk-y); }
.w-teach .chalks i:nth-child(3) { width: 54px; height: 16px; border-radius: 2px; background: linear-gradient(#3A3A3A 0 45%, #C9B7A0 45%); }

.w-teach .ah__cat { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 2px solid rgba(241, 240, 232, .75); border-radius: 3px; font-family: var(--f-hand); font-size: 21px; color: var(--chalk); }
.w-teach .ah__cat:hover { background: rgba(241, 240, 232, .12); }
.w-teach .ah__t {
  margin-top: 20px; font-family: var(--f-hand); font-weight: 400; font-size: 64px; line-height: 1.18; letter-spacing: .01em;
  text-shadow: 0 0 1px rgba(255, 255, 255, .8), 0 0 8px rgba(255, 255, 255, .18);
  animation: teach-chalk 1.8s steps(14) .2s both;
}
@keyframes teach-chalk { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -4% 0 0); } }
.w-teach .ah__lede {
  margin-top: 24px; max-width: 24em; font-family: var(--f-hand); font-size: 27px; line-height: 1.45; color: var(--chalk-y);
  text-shadow: 0 0 1px rgba(242, 209, 107, .7); animation: teach-chalk 1.4s steps(12) 1.9s both;
}
.w-teach .ah__lede::after { content: ""; display: block; width: 62%; height: 10px; margin-top: 6px; border-bottom: 2px solid rgba(242, 209, 107, .7); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.w-teach .ah__meta { margin-top: 26px; font-size: 14px; color: #CFDAD3; }
.w-teach .ah__meta dt { color: #9FB5AA; }

.w-teach .ah__slide { position: relative; padding: 10px; background: #FFFFFF; transform: rotate(1.6deg); box-shadow: 0 16px 26px rgba(0, 0, 0, .4); }
.w-teach .ah__slide img { width: 100%; height: auto; }
.w-teach .ah__slide::before, .w-teach .ah__slide::after { content: ""; position: absolute; top: -9px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF8A80, #C62828 60%, #7F1414); box-shadow: 0 3px 4px rgba(0, 0, 0, .45); }
.w-teach .ah__slide::before { left: 18px; } .w-teach .ah__slide::after { right: 18px; }
.w-teach .ah__slide figcaption { margin-top: 8px; font-size: 12.5px; color: #4A4F4C; }

/* ---------- text: the answer sheet ---------- */
.w-teach .ag { margin-top: 74px; }
.w-teach .prose { position: relative; padding: 56px 56px 60px 84px; background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 24px 40px -26px rgba(0, 0, 0, .35); }
.w-teach .prose::before { content: ""; position: absolute; top: 0; bottom: 0; left: 58px; width: 2px; background: rgba(200, 16, 46, .38); }
.w-teach.deco .prose { line-height: 35px; background-image: repeating-linear-gradient(transparent 0 34px, var(--rule) 34px 35px); background-position: 0 50px; }
.w-teach.deco .prose > * + * { margin-top: 0; }
.w-teach.deco .prose p { text-indent: 2em; }
.w-teach.deco .prose h2 { margin-top: 35px; font-family: var(--f-hand); font-weight: 400; font-size: 36px; line-height: 70px; color: #22302B; }
.w-teach.deco .prose ul, .w-teach.deco .prose ol { gap: 0; }
.w-teach.deco .prose blockquote { position: relative; margin: 35px 0; padding-left: 2em; color: var(--pen); }
.w-teach.deco .prose blockquote::before { content: ""; position: absolute; left: .4em; top: 6px; bottom: 6px; width: 12px; border: 2px solid var(--pen); border-right: 0; border-radius: 10px 0 0 10px; }
.w-teach.deco .prose blockquote p { text-indent: 0; }
.w-teach.deco .prose .ok { position: relative; }
.w-teach.deco .prose .ok::after { content: ""; position: absolute; left: -46px; top: 4px; width: 12px; height: 22px; border: solid var(--pen); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.w-teach .prose .paper-h { text-indent: 0 !important; display: flex; justify-content: space-between; gap: 20px; padding-bottom: 0; font-family: var(--f-ui); font-size: 13px; color: var(--muted); }
.w-teach .cut::before { background: linear-gradient(rgba(252, 252, 249, 0), #FCFCF9 70%); }
.w-teach .cut { margin-left: -84px !important; margin-right: -56px; margin-bottom: -60px; padding: 80px 56px 60px 84px; background: var(--paper); }
.w-teach .prose li > ul { padding-left: 1.5em; color: var(--muted); }
.w-teach .prose li > ul > li { list-style: circle; }
.w-teach .cut { text-indent: 0; line-height: 1.7; }

.w-teach .toc h2 { font-family: var(--f-hand); font-size: 21px; font-weight: 400; color: #22302B; }
.w-teach .toc a { font-family: var(--f-serif); }
.w-teach .toc a[aria-current="true"] { background: none; text-decoration: underline wavy var(--pen) 1.5px; text-underline-offset: 5px; }

.w-teach .rail__note { position: relative; padding: 20px 16px 16px; background: #FFF8C4; transform: rotate(-1.5deg); box-shadow: 0 10px 16px -10px rgba(0, 0, 0, .4); }
.w-teach .rail__note b { font-family: var(--f-hand); font-weight: 400; font-size: 21px; color: var(--pen); }
.w-teach .rail__note p { color: #4A4636; }

/* ---------- end matter ---------- */
.w-teach .ae h2 { font-family: var(--f-hand); font-weight: 400; font-size: 26px; letter-spacing: 0; }
.w-teach .tags a { background: var(--paper); font-family: var(--f-serif); }
.w-teach .author { background: linear-gradient(rgba(36, 69, 58, .62), rgba(36, 69, 58, .62)), #24453A url("../img/tex-chalk.png"); color: var(--chalk); border: 10px solid #7B5232; }
.w-teach .author h3 { font-family: var(--f-hand); font-weight: 400; font-size: 28px; }
.w-teach .author p, .w-teach .author h3 small { color: #CFDAD3; }
.w-teach .author img { filter: grayscale(.4); border: 4px solid #FFFFFF; transform: rotate(-2deg); }

/* a comment is a note passed across the desk */
.w-teach .cmt__list { gap: 22px; }
.w-teach .cmt__one { position: relative; max-width: 560px; padding: 22px 22px 18px; background: #FFFFFF; background-image: repeating-linear-gradient(transparent 0 27px, #D5E1EE 27px 28px); background-position: 0 14px; transform: rotate(-1.2deg); box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .45); }
.w-teach .cmt__one::before { content: ""; position: absolute; top: -10px; left: 30px; width: 72px; height: 20px; background: rgba(255, 255, 255, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transform: rotate(-5deg); }
.w-teach .cmt__one i { background: #24453A; color: var(--chalk); font-family: var(--f-hand); font-size: 18px; }
.w-teach .cmt__one p { font-family: var(--f-hand); font-size: 22px; line-height: 1.4; }
.w-teach .cmt__form textarea { background: var(--paper); }
.w-teach .cmt__form button { background: #24453A; color: var(--chalk); }

@container yh (max-width: 760px) {
  .w-teach .ah { width: calc(100% - 20px); padding-top: 24px; }
  .w-teach .board { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 30px 22px 44px; border-width: 10px 10px 16px; }
  .w-teach .ah__t { font-size: 40px; }
  .w-teach .ah__lede { font-size: 22px; }
  .w-teach .chalks { left: 10%; bottom: -14px; }
  .w-teach .ag { margin-top: 44px; width: calc(100% - 20px); }
  .w-teach .prose { padding: 34px 18px 40px 40px; }
  .w-teach .prose::before { left: 26px; }
  .w-teach.deco .prose { background-position: 0 28px; }
  .w-teach.deco .prose .ok::after { left: -30px; width: 9px; height: 17px; }
  .w-teach.deco .prose h2 { font-size: 30px; }
  .w-teach .prose .paper-h { flex-direction: column; gap: 0; }
  .w-teach .cut { margin-left: -40px !important; margin-right: -18px; margin-bottom: -40px; padding: 70px 18px 40px 40px; }
}