/* Shared story-page chrome, modal, and booklist rules. */

.book-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-bottom-color: var(--green); }

.book-card:nth-child(2):hover { border-bottom-color: var(--orange); }

.book-card:nth-child(3):hover { border-bottom-color: var(--yellow); }

.book-card:nth-child(4):hover { border-bottom-color: var(--blue); }

.book-cover { width: 90px; min-width: 90px; height: 120px; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 12px rgba(107,66,38,0.12); }

.book-cover-fallback {
  width: 90px; min-width: 90px; height: 120px;
  border-radius: 10px;
  background: linear-gradient(135deg, #a8d5ba 0%, #7ec8a0 50%, #5bb380 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 8px; text-align: center;
  font-size: 0.7rem; font-weight: 700; color: #fff;
  line-height: 1.3; word-break: break-word;
  box-shadow: 0 4px 12px rgba(107,66,38,0.12);
}

.book-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--green); text-decoration: none; transition: color 0.2s, transform 0.2s; }

.book-link svg { width: 14px; height: 14px; }

.book-tag { display: inline-block; font-size: 0.72rem; font-weight: 800; color: var(--green); background: var(--green-light); padding: 3px 10px; border-radius: 50px; margin-bottom: 8px; letter-spacing: 0.5px; }

.booklist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 1040px; margin: 0 auto 32px; }

.lang-switcher { display: flex; align-items: center; gap: 4px; margin-left: 28px; }

.modal-check {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 2px solid #E0D8CC;
  border-radius: 50px; cursor: pointer;
  font-size: 0.9rem; font-weight: 700; color: #555;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
}

.modal-check .check-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #ccc; display: flex;
  align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.modal-check input { display: none; }

.modal-check:hover { border-color: #ccc; }

.modal-check.checked .check-dot::after {
  content: ''; width: 6px; height: 6px;
  background: white; border-radius: 50%;
}

.modal-checks {
  display: flex; gap: 12px; flex-wrap: wrap;
}

.modal-close:hover { background: #f0f0f0; color: #666; }

.modal-emoji { font-size: 3rem; margin-bottom: 8px; display: block; }

.modal-field { margin-bottom: 16px; }

.modal-field label {
  display: block; font-size: 0.82rem; font-weight: 700;
  color: #555; margin-bottom: 6px;
}

.modal-note { font-size: 0.75rem; color: #aaa; text-align: center; margin-top: 14px; }

.modal-overlay.open { display: flex; opacity: 1; }

.modal-sub { color: #666; font-size: 0.88rem; line-height: 1.5; margin-bottom: 20px; }

.modal-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.nav-burger {
  display: none;
  background: none; border: none;
  font-size: 1.8rem; cursor: pointer;
  color: var(--brown);
}

.nav-logo:hover { transform: rotate(-3deg) scale(1.03); }

.nav-right { display: flex; align-items: center; gap: 0; margin-left: auto; }

.newsletter-note { font-size: 0.78rem; color: #999; margin-top: 12px; }

.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Subscribe Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity 0.25s ease;
}

html { scroll-behavior: smooth; }

img { max-width: 100%; height: auto; display: block; }

nav.scrolled { box-shadow: 0 6px 24px rgba(107,66,38,0.08); }

picture { display: block; }