/* The teaching schedule: one slot after another, the same order every card. */
.syn-teach{max-width:760px;margin:0 auto;padding:0 1rem 4rem}
.syn-teach-back{margin:1.2rem 0 .6rem}
.syn-teach-back a{color:var(--syn-text-dim);text-decoration:none;font-size:var(--t-sm)}
.syn-teach-back a:hover{color:var(--syn-gold-hi)}
.syn-teach-head{display:flex;gap:1.4rem;align-items:flex-start;margin:0 0 2rem;flex-wrap:wrap}
.syn-teach-head--index{display:block;margin-top:1.6rem}
.syn-teach-card{width:150px;height:auto;border-radius:8px;flex:none;
  border:1px solid var(--syn-border-hi);background:var(--syn-surface)}
.syn-teach-head h1{font-family:var(--syn-serif);font-size:var(--t-2xl);color:var(--syn-gold-hi);
  font-weight:normal;margin:.1rem 0 .3rem;text-wrap:balance}
.syn-teach-kicker{font-family:var(--syn-sans);font-feature-settings:"lnum","tnum";color:var(--syn-text-dim);font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;margin:0}
.syn-teach-key{color:var(--syn-text);font-size:var(--t-md);margin:0 0 .35rem}
.syn-teach-stage{color:var(--syn-ink-dim);font-size:var(--t-sm);line-height:var(--lh-prose);margin:0;font-style:italic}
.syn-teach-lede{color:var(--syn-ink-dim);font-size:var(--t-md);line-height:var(--lh-prose);margin:0;max-width:62ch}

.syn-teach-block{margin:0 0 2rem;padding-top:1.2rem;border-top:1px solid var(--syn-border)}
.syn-teach-block h2{font-family:var(--syn-serif);font-size:var(--t-lg);color:var(--syn-gold-hi);
  font-weight:normal;margin:0 0 .5rem}
.syn-teach-block p{color:var(--syn-text);font-size:var(--t-md);line-height:var(--lh-prose);margin:0 0 .7rem;max-width:64ch}
.syn-teach-sub{color:var(--syn-text-dim)!important;font-size:var(--t-sm)!important;line-height:var(--lh-prose)!important;margin-bottom:.9rem!important}
.syn-teach-lead{color:var(--syn-paper)!important;font-size:var(--t-md)!important;
  font-family:var(--syn-serif);grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0;
  font-size:var(--t-sm);align-items:baseline}
.syn-teach-facts dt{font-family:var(--syn-sans);font-feature-settings:"lnum","tnum";color:var(--syn-text-dim);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.syn-teach-facts dd{margin:0;color:var(--syn-text)}

.syn-teach-arenas{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.syn-teach-arenas li{display:grid;gap:.1rem;padding-left:.9rem;border-left:2px solid var(--syn-border)}
.syn-teach-arenas span{font-family:var(--syn-sans);font-feature-settings:"lnum","tnum";color:var(--syn-text-dim);font-size:var(--t-2xs);letter-spacing:.08em;text-transform:uppercase}
.syn-teach-arenas p{margin:0;max-width:var(--measure);font-size:var(--t-md);line-height:var(--lh-prose)}
.syn-teach-arenas--shadow li{border-left-color:color-mix(in srgb, var(--syn-mars) 45%, transparent)}

.syn-teach-question{font-family:var(--syn-serif);font-size:var(--t-md)!important;
  color:var(--syn-gold-hi)!important;font-style:italic}
.syn-teach-rite{padding:.8rem 1rem;border-radius:10px;background:var(--syn-surface);
  border-left:3px solid rgba(217,180,90,.5);margin:0 0 1rem}
.syn-teach-rite p{margin:0;color:var(--syn-paper)}

.syn-teach-near{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.syn-teach-near li{padding-left:.9rem;border-left:2px solid var(--syn-border)}
.syn-teach-near a{color:var(--syn-gold-hi);text-decoration:none;font-family:var(--syn-serif);font-size:var(--t-md)}
.syn-teach-near em{color:var(--syn-text-dim);font-style:normal;font-size:var(--t-xs);letter-spacing:.05em;margin-left:.5rem}
.syn-teach-near p{margin:.15rem 0 0;font-size:var(--t-sm);line-height:var(--lh-prose);color:var(--syn-ink-dim)}

.syn-teach-suit{margin:0 0 2.2rem}
.syn-teach-suit h2{font-family:var(--syn-serif);font-size:var(--t-lg);color:var(--syn-gold-hi);
  font-weight:normal;margin:0 0 .2rem}
.syn-teach-grid{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.4rem;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.syn-teach-grid a{display:flex;align-items:baseline;gap:.6rem;padding:.5rem .75rem;border-radius:8px;
  border:1px solid var(--syn-border);text-decoration:none;background:var(--syn-surface)}
.syn-teach-grid a:hover{border-color:var(--syn-border-hi)}
.syn-teach-grid b{color:var(--syn-text);font-weight:normal;font-size:var(--t-sm)}
.syn-teach-num{color:var(--syn-text-dim);font-size:var(--t-xs);min-width:2.6rem;font-variant-numeric:tabular-nums}
@media (max-width:640px){.syn-teach-card{width:110px}}
@media print{.syn-teach-back,.syn-teach-near{display:none}}


/* The deck, shown as a deck. Seventy-eight names became seventy-eight cards. */
.syn-teach-deck{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr))}
.syn-teach-deck a{display:flex;flex-direction:column;gap:.35rem;text-decoration:none;
  text-align:center}
.syn-teach-deck img{width:100%;height:auto;display:block;border-radius:6px;
  border:1px solid var(--syn-border);transition:border-color .16s, transform .16s}
.syn-teach-deck a:hover img{border-color:var(--syn-gold);transform:translateY(-3px)}
.syn-teach-deck b{color:var(--syn-text);font-weight:normal;font-size:var(--t-xs);line-height:var(--lh-tight)}
.syn-teach-deck a:hover b{color:var(--syn-gold-hi)}
@media (prefers-reduced-motion:reduce){.syn-teach-deck a:hover img{transform:none}}
