/* ZXJS uses The Hobbit's Spectrum shell, colours and local typeface. */
.zxjs-introduction { padding: 48px 0 36px; }
.zxjs-introduction .deck { font-size: 15px; line-height: 1.85; margin-top: 24px; }
.zxjs-story-layout { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 64px; border-top: 1px solid var(--line); padding: 36px 0 40px; }
.zxjs-story { max-width: 700px; scroll-margin-top: 24px; }
.zxjs-story h2, .zxjs-project h2 { font: 22px/1.6 var(--pixel); color: var(--yellow); margin: 0 0 22px; }
.zxjs-story p { color: var(--dim); font-size: 15px; line-height: 1.85; margin: 0 0 20px; }
.zxjs-story-link { display: inline-block; margin-top: 2px; font-size: 12px; }
.zxjs-why { border-top: 2px solid var(--line); padding: 18px 0; }
.zxjs-why h2 { color: var(--cyan); font: 16px/1.5 var(--pixel); margin: 0 0 20px; }
.zxjs-why p { color: var(--yellow); font: 32px/1.5 var(--pixel); margin: 0; }
.zxjs-project { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 28px 0 32px; border-top: 2px solid var(--white); border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.zxjs-project .eyebrow { margin-bottom: 12px; }
.zxjs-project h2 { margin-bottom: 8px; }
.zxjs-project p:last-child { margin: 0; color: var(--dim); font-size: 13px; }
.zxjs-play { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; flex-shrink: 0; padding: 15px 18px; color: var(--black); background: var(--yellow); border: 2px solid var(--yellow); font-weight: bold; text-decoration: none; }
.zxjs-play:hover { color: var(--black); background: var(--cyan); border-color: var(--cyan); }
.zxjs-play:focus-visible { outline-color: var(--cyan); }
.site-footer { margin-top: 40px; }
.site-footer p { margin: 0; }
@media (max-width: 800px) {
  .zxjs-story-layout { grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; }
  .zxjs-why p { font-size: 26px; }
}
@media (max-width: 600px) {
  .zxjs-introduction { padding: 32px 0 28px; }
  .zxjs-story-layout { grid-template-columns: 1fr; gap: 32px; padding: 28px 0 32px; }
  .zxjs-introduction .deck, .zxjs-story p { font-size: 14px; }
  .zxjs-story h2, .zxjs-project h2 { font-size: 18px; }
  .zxjs-why { padding-bottom: 0; }
  .zxjs-why p { font-size: 28px; }
  .zxjs-project { align-items: flex-start; flex-direction: column; gap: 22px; }
  .zxjs-play { width: 100%; }
  .site-footer { margin-top: 32px; }
}