/* STAMP Workshop Tutorials. Every rule is scoped to a class starting "wt-". */

.wt-lede { max-width: 900px; }
.wt-container { max-width: calc(1216px + 2 * var(--gutter)); }

/* "Please note" and the formal-training buttons */
.wt-note-section { padding: 80px 0; background: var(--bg-light); }
.wt-note { padding: 32px; border: 1px solid #e5e9ef; }
.wt-note h2.eyebrow { margin-bottom: 14px; font-size: 14px; line-height: 1.5; }
.wt-note p { margin: 0; font-size: 16px; line-height: 1.9; }
.wt-note strong { color: #475569; }
.wt-formal { margin: 26px 0 22px; }
.wt-buttons { justify-content: flex-start; }

/* The tutorial lists */
.wt-title { margin-bottom: 40px; font-family: var(--font-head); font-size: clamp(32px, 4vw, 44px); letter-spacing: -.02em; }
.wt-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 56px 0 20px; font-family: var(--font-head); font-size: 28px; }
.wt-title + .wt-group { margin-top: 0; }
.wt-group .tag { font-family: var(--font-body); font-size: 12px; letter-spacing: .08em; padding: 6px 12px; }
.wt-list { display: grid; gap: 20px; }
.wt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 26px; border: 1px solid #e5e9ef; border-radius: 12px; background: #fff; }
.wt-row h4 { font-size: 17px; font-weight: 600; letter-spacing: .01em; color: #0d121b; }
.wt-row p { margin: 6px 0 0; font-size: 14px; }
.wt-links { display: flex; flex-wrap: wrap; gap: 20px; flex: none; }
.wt-links .btn { padding: 9px 16px; border-width: 1px; font-weight: 600; letter-spacing: .04em; }
.wt-links .btn-navy { border-color: var(--navy-btn); }
.wt-links .icon { width: 16px; height: 16px; }
.wt-slides { background: #fff; color: var(--steel-text); border-color: var(--steel); }
.wt-slides:hover { background: var(--steel-text); color: #fff; }

@media (max-width: 760px) {
  .wt-note-section { padding: 56px 0; }
  .wt-note { padding: 24px 20px; }
  .wt-buttons { align-items: stretch; }
  .wt-row { flex-direction: column; align-items: flex-start; padding: 20px; }
  .wt-links { gap: 12px; }
  .wt-group { font-size: 24px; }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .wt-note { border-color: #323844; }
  .wt-note strong { color: #bbcbe3; }
  .wt-row { border-color: #323844; background-color: #111620; }
  .wt-row h4 { color: #dee6f3; }
  .wt-links .btn-navy { border-color: #8ba5d4; }
  .wt-slides { background-color: #111620; border-color: #4892dc; }
  .wt-slides:hover { background-color: #2f6fb5; color: #ffffff; }
}