/* Shell: header, section chips, flip stage, controls, footer */
* { box-sizing: border-box; }
body { margin: 0; background: #E9ECF2; font-family: 'Open Sans', system-ui, sans-serif; color: #1B1F2A; }
a { color: #2E358B; } a:hover { color: #03183B; }
.app { min-height: 100vh; display: flex; flex-direction: column; }

.site-header { background: #03183B; color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px clamp(16px, 4vw, 40px); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-bar { width: 6px; height: 34px; background: #E31E24; border-radius: 2px; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-kicker { font: 600 11px/1.2 'Poppins', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.brand-title { font: 600 19px/1.2 'Poppins', system-ui, sans-serif; }
.header-note { font: 500 13px/1.3 'Poppins', system-ui, sans-serif; color: rgba(255,255,255,.85); }

.chips-bar { background: #fff; border-bottom: 1px solid #DDE1EA; padding: 10px clamp(16px, 4vw, 40px); overflow-x: auto; }
.chips { display: flex; gap: 8px; width: max-content; }
.chip { min-height: 36px; border: 1px solid #C9CEDB; background: #fff; color: #03183B; border-radius: 999px; padding: 0 14px; cursor: pointer; font: 500 12.5px/1 'Poppins', system-ui, sans-serif; white-space: nowrap; }
.chip:hover { border-color: #2E358B; }
.chip-on { background: #03183B; color: #fff; border-color: #03183B; }

.stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 28px 16px 36px; }
.book-outer { position: relative; }
.book { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; box-shadow: 0 30px 60px -20px rgba(3,24,59,.45), 0 4px 14px rgba(3,24,59,.12); }
.leaf { width: 640px; height: 905px; position: relative; background: #DCE0E8; }
.leaf-left { transform-origin: 100% 50%; }
.leaf-right { transform-origin: 0% 50%; }
.leaf-content { width: 640px; height: 905px; }
.gutter { position: absolute; top: 0; width: 34px; height: 905px; pointer-events: none; }
.gutter-left { right: 0; background: linear-gradient(to left, rgba(3,24,59,.16), rgba(3,24,59,0)); }
.gutter-right { left: 0; background: linear-gradient(to right, rgba(3,24,59,.14), rgba(3,24,59,0)); }
.single .leaf-left { display: none; }
.single .gutter-right { display: none; }

.flip-next { animation: flipNext .65s cubic-bezier(.2,.7,.2,1) both; }
.flip-prev { animation: flipPrev .65s cubic-bezier(.2,.7,.2,1) both; }
@keyframes flipNext { 0% { transform: perspective(2200px) rotateY(88deg); filter: brightness(.75); } 100% { transform: perspective(2200px) rotateY(0deg); filter: brightness(1); } }
@keyframes flipPrev { 0% { transform: perspective(2200px) rotateY(-88deg); filter: brightness(.75); } 100% { transform: perspective(2200px) rotateY(0deg); filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .flip-next, .flip-prev { animation: none; } }

.controls { display: flex; align-items: center; gap: 16px; }
.ctl { min-height: 44px; min-width: 44px; border: 0; border-radius: 999px; cursor: pointer; font: 600 14px/1 'Poppins', system-ui, sans-serif; padding: 0 20px; }
.ctl:disabled { opacity: .35; cursor: default; }
.ctl-prev { background: #fff; color: #03183B; box-shadow: 0 0 0 1px #C9CEDB; }
.ctl-next { background: #03183B; color: #fff; }
.counter { font: 500 13px/1.3 'Poppins', system-ui, sans-serif; color: #3A4050; min-width: 120px; text-align: center; }

.site-footer { background: #fff; border-top: 1px solid #DDE1EA; padding: 14px clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12px; color: #4A5163; }