/* Books share a generous, resolution-independent frame in both designs. */
[data-design] .book-card__visual { padding: 0; perspective: none; }
[data-design] .book-card:nth-child(n) .book-card__image,
[data-design] .book-card .book-card__placeholder {
  width: 100%; max-width: 100%; height: auto; max-height: 420px;
  aspect-ratio: auto; object-fit: contain; transform: none;
  border-radius: 4px; box-shadow: 0 14px 24px -8px #1e365c40, 0 2px 4px #1e365c18;
}
/* Classic: a navy editorial frame around a light, readable study workspace. */
html[data-design="classic"] body { background: #0f1b2b; }
html[data-design="classic"] .hero { background: radial-gradient(ellipse at 95% 5%, #233e62 0, transparent 60%), #101e33; color: #f0f4fa; border-bottom: 1px solid #31455f; }
html[data-design="classic"] .hero::before { display: block; background: linear-gradient(90deg, #6f8bab09 1px, transparent 1px); background-size: 96px 100%; }
html[data-design="classic"] h1 { font-weight: 700; letter-spacing: -.035em; line-height: 1.14; }
html[data-design="classic"] .site-header { background: #0b1627; color: #f0f4fa; border-bottom-color: #2b3c53; box-shadow: 0 8px 28px #02081440; }
html[data-design="classic"] .brand__tagline { color: #b4c3d8; }
html[data-design="classic"] .brand__mark { background: #1b2c44; border-color: #3e536e; color: #d9bb82; }
html[data-design="classic"] .main-nav a { color: #d5e0f0; }
html[data-design="classic"] .category-tab { background: #182a42; color: #d5e0f0; border: 1px solid #304763; }
html[data-design="classic"] .design-toggle { background: #17273c; border-color: #36485f; }
html[data-design="classic"] .design-toggle button { color: #bac8db; }
html[data-design="classic"] .design-toggle button[aria-pressed="true"] { background: #334a67; color: #fff; box-shadow: none; }
html[data-design="classic"] .eyebrow { background: transparent; border: 0; border-left: 2px solid #c4a66b; border-radius: 0; color: #d9c499; letter-spacing: .06em; padding: 3px 0 3px 14px; }
html[data-design="classic"] .hero__description,
html[data-design="classic"] .hero-features li { color: #c2cee0; }
html[data-design="classic"] .hero-features__icon { background: #1d304b; color: #d9c499; border-color: #3b526f; border-radius: 8px; }
html[data-design="classic"] .book-stage { perspective: none; gap: 20px; }
html[data-design="classic"] .book-card { background: linear-gradient(155deg, #22354f, #16253b); border: 1px solid #3d526e; border-top: 2px solid #819bbd; border-radius: 10px; box-shadow: 0 22px 40px -20px #000b; transform: none; transition: border-color 180ms ease, box-shadow 180ms ease; }
html[data-design="classic"] .book-card__caption { padding-top: 18px; border-top: 1px solid #41536b; }
html[data-design="classic"] .book-card__caption h2 { color: #f3f6fb; }
html[data-design="classic"] .book-card__caption .rich-text { color: #c3cfe0; }
html[data-design="classic"] .book-card .book-card__image { transform: none; border-radius: 3px; box-shadow: 0 16px 24px -10px #0009; }
html[data-design="classic"] .button { background: #234d82; border-color: #234d82; border-radius: 8px; box-shadow: 0 4px 10px #0d29451a; }
html[data-design="classic"] .button--secondary { background: #fff; color: #234d82; border-color: #b8c8dc; box-shadow: none; }
html[data-design="classic"] .button--ghost { background: #e6d4ad; color: #1a2a42; border-color: #e6d4ad; box-shadow: 0 3px 12px #0002; }
html[data-design="classic"] .quiz,
html[data-design="classic"] .info,
html[data-design="classic"] .faq { background: #0f1b2b; }
html[data-design="classic"] .quiz-panel,
html[data-design="classic"] .info-card,
html[data-design="classic"] .faq__inner { background: #f8fafc; border-color: #d5dfe9; border-radius: 10px; box-shadow: 0 12px 30px -16px #0009; }
html[data-design="classic"] .quiz-panel { --ink: #202b40; --muted: #58677d; --navy-800: #243b59; --blue-700: #245dc1; --line: #dde5ef; color: var(--ink); border-top: 3px solid #8ba8cc; }
html[data-design="classic"] .quiz-panel:has([data-subject-select] option[value=""]:checked) .quiz-panel__question { background: #edf2f8; border-color: #d7e1ee; }
html[data-design="classic"] .quiz-stats { background: #edf2f8; }
html[data-design="classic"] .site-footer { background: #091322; border-top: 1px solid #31455f; }
/* Directory skin. Extra specificity keeps the same palette with portal.css. */
html[data-design="classic"] .portal { background: #0f1b2b; color: #e6edf6; --muted: #b7c5d9; --navy-800: #e6edf6; --blue-700: #97beff; --line: #344962; }
html[data-design="classic"] .portal-hero { background: radial-gradient(ellipse at 90% 0, #233e62, transparent 65%), #101e33; color: #f0f4fa; border-bottom: 1px solid #31455f; }
html[data-design="classic"] .portal-lead,
html[data-design="classic"] .portal-benefits { color: #c2cee0; }
html[data-design="classic"] .portal-kicker { color: #b4c8e2; }
html[data-design="classic"] .direction-card { background: #192a41; color: #edf3fb; border-color: #3d526e; border-top: 2px solid #819bbd; border-radius: 10px; box-shadow: 0 18px 28px -16px #000a; }
html[data-design="classic"] .direction-card__number { background: #263d5b; color: #e0c895; border-color: #536b8b; border-radius: 8px; }
html[data-design="classic"] .direction-card__description,
html[data-design="classic"] .direction-card__arrow { color: #c2cee0; }
html[data-design="classic"] .direction-card__link { color: #dfc590; border-color: #3b526f; }
html[data-design="classic"] .portal-how,
html[data-design="classic"] .portal-faq,
html[data-design="classic"] .portal-faq .faq-item { border-color: #344962; }
html[data-design="classic"] .portal .portal-cta { background: #e6d4ad; color: #1a2a42; border-color: #e6d4ad; }
@media (hover: hover) {
  html[data-design="classic"] .book-card:hover { transform: none; border-color: #96afd0; box-shadow: 0 24px 42px -18px #000c; }
  html[data-design="classic"] .main-nav a:hover { color: #efdcb5; }
  html[data-design="classic"] .category-tab:hover { background: #253b59; }
}
@media (max-width: 480px) {
  [data-design] .book-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px; }
  html[data-design="classic"] .book-card__caption { padding-top: 0; border-top: 0; }
}