/* Hallmark · macrostructure: cover-led catalogue · theme: studied-DNA (source: user video image)
 * genre: editorial · original TW paper/forest-green + night · typography: existing Sarabun/Noto Serif Thai
 * pre-emit critique: P4 H4 E4 S5 R5 V4 · no invented metrics, imagery, fonts or identity */
html,body { overflow-x: clip; }
body { font-family: var(--font-body); }
.site { overflow: visible; }
h1,h2,h3 { font-style: normal; overflow-wrap: anywhere; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; background: var(--color-surface); padding-inline: var(--space-lg); }
.topbar-inner { max-width: 1120px; min-height: 72px; gap: var(--space-lg); }
.top-nav { gap: var(--space-md); font-size: var(--text-body); }
.top-nav a { min-height: 72px; white-space: nowrap; }
.top-search { width: 224px; }
.main { max-width: 1168px; padding: var(--space-lg); }
.brand-name { font-size: 25px; }
.catalog-welcome { margin: var(--space-sm) 0 var(--space-md); }
.catalog-welcome h1 { font-size: 25px; }
.catalog-welcome .subheading { font-size: var(--text-small); }
.discover-section { scroll-margin-top: 100px; }
.video-home .discovery-search { margin-bottom: var(--space-md); }
.video-home #catalogBrowse { margin-bottom: var(--space-md); font-size: var(--text-small); }
.home-feature-banner { min-height: 180px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); border-block: 1px solid var(--color-rule); background: var(--color-tint); color: var(--color-ink); margin: 0 0 var(--space-lg); }
.banner-brand { color: var(--color-accent); font-size: var(--text-small); margin-bottom: var(--space-sm); }
.home-feature-banner h2 { font-family: var(--font-display); font-size: clamp(22px,2.3vw,30px); line-height: 1.6; }
.banner-copy { font-size: var(--text-body); color: var(--color-ink); margin-top: var(--space-sm); }
.cover-fallback { color: var(--color-ink); }
.banner-links { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); font-size: 13px; }
.banner-directory { min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--color-accent); white-space: nowrap; }
.video-home .discovery-section { margin-bottom: var(--space-xl); }
.video-home .discovery-section-head h2 { font-family: var(--font-display); font-size: var(--text-title); }
.video-home .section-note { line-height: 1.8; }
#homeRatings { padding: var(--space-lg); background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: var(--radius-card); }
#homeRatings .form-status:empty { display: none; }
/* Explore surface: first-screen ranking, cover-led left and compact right. */
#homeRatings .discovery-section-head h1 { font-family: var(--font-display); font-size: 23px; line-height: 1.5; color: var(--color-ink); margin: 0; }
.rating-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; align-items: start; }
.rating-main { min-width: 0; }
.rating-layout:has(> .rating-index:empty) { grid-template-columns: minmax(0,1fr); }
.rating-podium { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding-block: 0 12px; }
.rating-podium .discovery-open { position: relative; }
.rating-podium .discovery-cover { width: 100%; aspect-ratio: 2 / 3; max-height: 270px; border-radius: 6px; }
.rating-podium .discovery-cover img { object-fit: contain; background: var(--color-tint); }
.rating-number { position: absolute; top: 0; left: 0; z-index: 1; width: 31px; height: 34px; display: grid; place-items: center; background: var(--color-accent); color: var(--color-accent-ink); font-size: 19px; font-weight: 700; border-radius: 5px 0 8px 0; }
.rating-podium .discovery-copy { margin-top: 8px; }
.rating-podium .discovery-copy h3 { font-size: 14px; line-height: 1.6; }
.rating-podium .book-genres { display: none; }
.rating-podium .discovery-meta { margin-top: 4px; font-size: 12px; }
.rating-index { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; list-style: none; padding: 0; margin: 0; }
.rating-index li { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr); column-gap: 10px; align-items: center; border-top: 1px solid var(--color-rule); padding-block: 10px; min-height: 82px; box-sizing: border-box; }
.rating-index-right li:first-child { border-top: 0; padding-top: 0; }
.rating-index li::before { content: attr(value); color: var(--color-muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.rating-index .discovery-compact { padding: 0; border: 0; }
.rating-index .discovery-open { grid-template-columns: 46px minmax(0,1fr); gap: 12px; align-items: center; }
.rating-index .discovery-copy h3 { font-size: 14px; line-height: 1.5; }
.rating-index .book-genres { display: none; }
.rating-index .discovery-stats { display: flex; gap: 5px; font-size: 11px; line-height: 1.5; }
.rating-index .source-rating { font-size: 12px; line-height: 1.6; font-weight: 600; }
@media(max-width:899px) { .rating-layout { grid-template-columns: minmax(0,1fr); gap: 0; } .rating-index-right li:first-child { border-top: 1px solid var(--color-rule); padding-top: 10px; } }

.rating-coverage { margin: 0; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.metadata-editorial-label { font-size: 11px; line-height: 1.6; color: var(--color-muted); margin-top: var(--space-xs); }
.video-home #discoveryFeatured { background: transparent; border: 0; border-radius: 0; padding: 0; }
.source-picks { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0 var(--space-lg); }
.source-picks .discovery-open { grid-template-columns: 44px minmax(0,1fr); gap: var(--space-sm); }
.source-picks h3 { font-size: 13px; }
.source-picks .discovery-meta .book-genres,.source-picks .discovery-meta .discovery-stats { display: none; }
.source-picks .metadata-editorial-label { font-size: 10px; }
#discoveryGenres { scroll-margin-top: 100px; border-block: 1px solid var(--color-rule); padding-block: var(--space-md); }
.discovery-genre-grid { scrollbar-width: thin; }
.discovery-shelf { grid-auto-columns: calc((100% - 100px) / 6); gap: 20px; scrollbar-width: thin; }
.discovery-cover { border-radius: var(--radius-cover); }
.discovery-cover img { object-fit: contain; background: var(--color-tint); }
#homeIndexed { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
#homeIndexedBrowse { font-size: var(--text-small); margin-bottom: var(--space-lg); }
#homeIndexed .discovery-book-row { grid-template-columns: repeat(6,minmax(0,1fr)); }
.video-home .discovery-updates-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md) var(--space-lg); }
.video-home .discovery-update .discovery-open { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.video-home .discovery-update .discovery-copy { margin: 0; }
.category-panel { box-shadow: none; }
:where(a,button,input,select):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media(hover:hover) { .banner-directory:hover { text-decoration: underline; } }
@media(max-width:1050px) { .topbar-inner { gap: var(--space-md); } .top-nav { gap: 12px; font-size: 13px; } .top-search { width: 160px; } .brand-name { font-size: 23px; } }
.mobile-menu-toggle { display: none; }
.mobile-tabs[hidden] { display: none !important; }
@media(max-width:850px) {
 .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
 .topbar-inner > .mobile-menu-toggle { order: 0; }
 .topbar { position: static; padding: var(--space-md) var(--space-lg); }
 .topbar-inner { min-height: 0; gap: var(--space-sm); }
 .top-search { width: 100%; }
 .main { padding-top: 0; }
 .mobile-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
 .mobile-tabs a,.mobile-tabs button { font-size: 14px; white-space: nowrap; }
 #mobileAccount:empty { min-height: 0; margin: 0; }
 .home-feature-banner { padding: var(--space-lg); }
 .source-picks { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .discovery-shelf { grid-auto-columns: calc((100% - 60px) / 4); }
 #homeIndexed .discovery-book-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
 .rating-podium { gap: var(--space-md); }
}
@media(max-width:600px) {
 .main { padding-inline: var(--space-md); }
 .topbar { padding-inline: var(--space-md); }
 .catalog-welcome { flex-wrap: wrap; margin-top: var(--space-md); }
 .catalog-welcome h1 { font-size: 23px; }
 .home-feature-banner { flex-direction: column; align-items: stretch; gap: var(--space-md); padding: var(--space-lg) var(--space-md); }
 .banner-links { flex-direction: row; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; }
 .banner-links a { font-size: 12px; }
 .banner-links .solid { padding-inline: 12px; }
 .home-feature-banner h2 { font-size: 24px; }
 .banner-copy { font-size: 13px; }
 .video-home .discovery-section-head { flex-direction: column; align-items: flex-start; gap: 0; }
 .video-home .discovery-section-head h2 { font-size: 20px; flex-basis: auto; }
 .video-home .shelf-controls { margin: var(--space-xs) 0 var(--space-sm); }
 .video-home .discovery-see-all { min-height: 44px; }
 #homeRatings { padding: var(--space-md); }
 .rating-podium { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-sm); }
 .video-home #homeRatings .discovery-section-head { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
 #homeRatings .discovery-section-head h1 { font-size: 20px; }
 .video-home #homeRatings .discovery-see-all { font-size: 12px; }
 .rating-podium .discovery-copy h3 { font-size: 13px; line-height: 1.6; }
 .rating-podium .discovery-meta { font-size: 11px; }
 .rating-podium .book-genres,.rating-podium .discovery-stats { display: none; }
 .rating-podium .metadata-editorial-label { font-size: 10px; }
 .rating-podium .source-rating { font-size: 10px; }
 .rating-number { width: 26px; height: 26px; font-size: 16px; top: var(--space-xs); left: var(--space-xs); }
 .rating-index { grid-template-columns: minmax(0,1fr); }
 .rating-index .discovery-open { grid-template-columns: 44px minmax(0,1fr); }
 .source-picks { grid-template-columns: minmax(0,1fr); }
 .discovery-shelf { grid-auto-columns: calc((100% - 16px) / 2); gap: var(--space-md); }
 #homeIndexed .discovery-book-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .video-home .discovery-updates-grid { grid-template-columns: minmax(0,1fr); }
 .section-note { overflow-wrap: anywhere; }
 .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
/* Compact catalog disclosure: brand tokens and existing focus behavior retained. */
[data-category-toggle] { display: inline-flex; align-items: center; gap: 7px; }
.category-chevron { flex: 0 0 12px; width: 12px; height: 12px; transition: transform 140ms ease-out; }
[data-category-toggle][aria-expanded="true"] .category-chevron { transform: rotate(180deg); }
.category-panel { width: min(600px,calc(100vw - 24px)); box-sizing: border-box; padding: 12px; border-radius: 10px; scrollbar-width: thin; scrollbar-color: var(--color-rule) transparent; }
.category-heading { gap: 8px; padding: 0 4px 8px; border-bottom: 1px solid var(--color-rule); }
.category-heading h2 { font-size: 16px; line-height: 1.5; }
.category-heading button { min-width: 36px; min-height: 36px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; font-size: 22px; border-radius: 6px; }
#categoryStatus:empty { display: none; }
.category-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2px 6px; padding-block: 8px; }
.category-grid a { min-height: 36px; padding: 5px 8px; font-size: 13px; line-height: 1.5; box-sizing: border-box; }
.category-shortcuts { margin-top: 0; padding-top: 8px; gap: 4px 12px; }
.category-shortcuts a { min-height: 36px; padding: 4px 6px; font-size: 12px; }
@media(max-width:600px) {
 .category-panel { padding: 10px; }
 .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 4px; }
 .category-grid a,.category-shortcuts a { min-height: 44px; font-size: 13px; }
 .category-heading button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
}
@media(prefers-reduced-motion:reduce) { .category-chevron { transition: none; } }