/* W3 showcase (/what-it-can-do): the comp's inline styles (website-v1/stories.py) as classes. Everything else is in site.css. */
.s-head { padding-top: 96px; }
.sh1 { font-size: 72px; line-height: 1.02; letter-spacing: -.025em; font-weight: 500; max-width: 900px; }
.s-journey { padding-top: 56px; }
.s-tight { padding-top: 24px; }
.s-ai, .s-build { padding-top: 72px; }

.slabel { margin-bottom: 10px; }

/* journey */
.jstops { border-top: 1px solid var(--rule); margin-top: 18px; }
.ans.after { font-size: 16px; color: var(--ink-2); }

/* music */
.ans b { font-weight: 600; }
.chartlabel { margin-bottom: 12px; }
.chartsrc { margin-top: 14px; color: var(--mid); }

/* your AI */
.story .q.tq { font-size: 22px; }
.story .thread { margin-top: 14px; }

/* build your own */
.s-build .aside { max-width: 240px; }
.ts-head { margin-bottom: 18px; }
.ans.ts-line { color: var(--ink-2); margin-top: 8px; }
.ts-title { font-size: 20px; font-weight: 500; }
.tsfoot b { font-weight: 500; }

/* Your year row: focusable so it can be scrolled from the keyboard on a phone */
.rwcards:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@media (max-width: 600px) {
  .s-head { padding-top: 48px; }
  .sh1 { font-size: 48px; }
  .s-journey { padding-top: 40px; }
  .s-ai, .s-build { padding-top: 64px; }
}