/* Teaching: a reading list, so the page is one column and the rows are quiet. */
.teaching{max-width:720px;padding:82px 0 100px}
.teaching-heading{margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.teaching-heading h1{font:400 38px/1.2 var(--serif);letter-spacing:-.035em}
.teaching-heading h1 span{color:var(--gold)}
.teaching-heading p{max-width:52ch;margin-top:16px;color:var(--text-dim);font:400 13px/1.7 var(--sans)}
.teaching-empty{max-width:52ch;color:var(--text-faint);font:400 13px/1.7 var(--sans)}
.course{margin-bottom:44px}
.course:last-child{margin-bottom:0}
.course h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;font:400 20px/1.3 var(--serif);letter-spacing:-.02em}
.course-term{font:500 9.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.course-note{max-width:56ch;margin-top:10px;color:var(--text-dim);font:400 13px/1.7 var(--sans)}
.materials{margin-top:18px;padding:0;list-style:none}
/* A hairline per row rather than a box: the list should read as a page, not as cards. */
.material{border-top:1px solid var(--line)}
.material:last-child{border-bottom:1px solid var(--line)}
.material a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;padding:14px 4px;color:var(--text)}
.material a:hover{text-decoration:none;color:var(--gold);background:rgba(160,240,255,.03)}
.material a:focus-visible{outline:1px solid var(--gold);outline-offset:-1px;color:var(--gold)}
.material-name{font:400 14px/1.5 var(--sans)}
.out-mark{margin-left:6px;color:var(--gold)}
.material-meta{font:500 9.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.material a:hover .material-meta{color:var(--gold-dim)}
@media(max-width:600px){
  .teaching{padding:45px 0 60px}
  .teaching-heading{margin-bottom:30px}
  .teaching-heading h1{font-size:32px}
  .course{margin-bottom:34px}
  .course h2{font-size:18px}
  .material a{padding:13px 2px}
}