/* /puzzles page. Mobile first, large readable text. */
.pz-hero { background: var(--slate); color: #fff; text-align: center; padding: 40px 20px 32px; }
.pz-hero h1 { font-family: 'Playfair Display', serif; font-size: 2rem; line-height: 1.2; margin: 0 0 10px; }
.pz-pub { margin: 0; font-size: 1.15rem; color: #F2E6CC; }
.pz-wrap { max-width: 960px; margin: 0 auto; padding: 24px 18px 56px; font-size: 1.2rem; line-height: 1.65; }
.pz-wrap h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--slate-dark); margin: 36px 0 8px; }
.pz-intro { font-size: 1.3rem; }
.pz-sub, .pz-small { color: #4a4a4a; }
.pz-small { font-size: 1.05rem; }
.pz-grid { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; }
.pz-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.pz-cover { background: var(--pz-color); color: #fff; min-height: 150px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; text-align: center; border-bottom: 5px solid var(--wheat); }
.pz-cover-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem; line-height: 1.25; }
.pz-cover-by { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 14px; }
.pz-info { padding: 16px 18px 20px; }
.pz-info h3 { font-family: 'Playfair Display', serif; font-size: 1.25rem; line-height: 1.3; margin: 0 0 6px; color: var(--slate-dark); }
.pz-subtitle { margin: 0 0 6px; font-size: 1.05rem; }
.pz-theme { margin: 0 0 12px; color: #4a4a4a; font-size: 1.05rem; }
.pz-soon { display: inline-block; padding: 6px 14px; border: 2px solid var(--slate); border-radius: 999px; font-weight: 600; color: var(--slate-dark); font-size: 1.05rem; }
.pz-btn { display: inline-block; background: var(--slate); color: #fff !important; text-decoration: none; font-weight: 600; font-size: 1.15rem; padding: 14px 22px; border-radius: 6px; min-height: 48px; }
.pz-btn:hover { background: var(--slate-dark); }
@media (min-width: 600px) {
  .pz-hero h1 { font-size: 2.6rem; }
  .pz-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .pz-grid { grid-template-columns: repeat(3, 1fr); }
}