/* Page styles: musing. Scoped under <main class="page">. */
/* Musing extras: 4-column grid and the dad-joke box */
.page .grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .page .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .page .grid { grid-template-columns: 1fr; } }

.joke {
  flex: 1;
  background: var(--bg); border: 1px dashed var(--edge); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 12px; min-height: 92px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.joke .q { color: var(--text); font-weight: 600; }
.joke .a { color: var(--t); font-weight: 600; opacity: 0; transition: opacity .25s ease; }
.joke.revealed .a { opacity: 1; }
.joke-actions { display: flex; gap: 8px; flex-wrap: wrap; }
button.btn { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }