/* Page-level styles that the design canvas carried in its <helmet> block,
   plus the few rules its runtime applied (style-hover, hidden states). */

body { margin: 0; background: var(--color-bg, #f5ead8); }
a { color: var(--color-accent-700, #8c491a); }
a:hover { color: var(--color-accent-800, #643312); }

[hidden] { display: none !important; }

.footer-link { color: var(--color-accent-200); text-decoration: none; }
.footer-link:hover { color: var(--color-accent-100); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The canvas dialog sat on a dimmed backdrop; keep that here. */
.dialog-backdrop { background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); }

/* ── Wide-screen layout ───────────────────────────────────────────────────
   The page column grows to 1100px. The flexible grids add columns on their
   own; these two need a hand. */

/* The four book spreads read best as a 2x2 block. Left to itself the grid
   would open a third column on a wide screen and orphan the fourth spread. */
.grid-spreads { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid-spreads { grid-template-columns: 1fr 1fr; }
}

/* The activity-book samples are small line-art pages. Cap the row so a wide
   screen never draws them larger than the artwork really is. */
.grid-samples { grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 620px) { .grid-samples { grid-template-columns: repeat(4, 1fr) !important; } }

/* Author bio with a watercolor chickadee (SI-1 from the book's spot
   illustrations) beside it. On a wide screen the art fills the space to the
   right of the bio; on a narrow one it drops below and centers. */
.author-row {
  margin: 0 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
}
.author-art {
  display: block; flex: 0 1 340px; width: 340px; max-width: 100%; height: auto;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .author-art { width: 240px; flex-basis: 240px; margin-top: 8px; }
}

/* Sign-up forms. The spam-trap field is moved off screen: people never see
   it, bots fill it in, and the sign-up function quietly ignores them. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.form-error {
  margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; font-weight: 600;
  color: var(--color-accent-800);
}
button[disabled] { opacity: 0.6; cursor: progress; }