.jcbb-reader { --jcbb-teal: #164c50; --jcbb-cream: #fffaf0; --jcbb-gold: #b58a42; box-sizing: border-box; background: #f2eee4; color: #243c3c; padding: clamp(24px, 5vw, 72px) 16px; font: 18px/1.65 Georgia, 'Times New Roman', serif; }
.jcbb-reader *, .jcbb-reader *::before, .jcbb-reader *::after { box-sizing: border-box; }
.jcbb-reader [hidden] { display: none !important; }
.jcbb-reader__shell { max-width: 1120px; margin: 0 auto; }
.jcbb-reader__view { background: var(--jcbb-cream); border: 1px solid #e3d8c1; border-radius: 24px; padding: clamp(24px, 5vw, 64px); margin-bottom: 24px; box-shadow: 0 12px 40px #164c500a; scroll-margin-top: 100px; overflow-wrap: anywhere; }
.jcbb-reader__landing { display: grid; gap: 32px; align-items: center; }
.jcbb-reader__cover { max-width: 360px; width: 100%; margin: 0 auto; }
.jcbb-reader__cover img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 16px 28px #163c3c26; }
.jcbb-reader h1, .jcbb-reader h2 { color: var(--jcbb-teal); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; line-height: 1.16; padding: 0; }
.jcbb-reader h1 { font-size: clamp(32px, 4vw, 52px); margin: 0 0 20px; }
.jcbb-reader p { margin: 0 0 1em; padding: 0; }
.jcbb-reader__eyebrow, .jcbb-reader__age, .jcbb-reader__toolbar, .jcbb-reader__progress, .jcbb-reader__button, .jcbb-reader__back { font-family: system-ui, sans-serif; }
.jcbb-reader__eyebrow { color: var(--jcbb-teal); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.jcbb-reader__author { font-size: 21px; }
.jcbb-reader__age { display: inline-block; border-bottom: 2px solid var(--jcbb-gold); font-size: 15px; }
.jcbb-reader__description { margin: 12px 0 28px; }
.jcbb-reader a { color: var(--jcbb-teal); text-decoration: underline; text-underline-offset: 4px; }
.jcbb-reader .jcbb-reader__button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 52px; padding: 12px 24px; border: 2px solid var(--jcbb-teal); border-radius: 14px; background: var(--jcbb-teal); color: #fffaf0; font-size: 17px; font-weight: 650; line-height: 1.4; text-decoration: none; }
.jcbb-reader .jcbb-reader__button:hover { background: #0e383b; color: #fffaf0; }
.jcbb-reader .jcbb-reader__button--quiet { background: transparent; color: var(--jcbb-teal); }
.jcbb-reader .jcbb-reader__button--quiet:hover { background: #eee9dc; color: var(--jcbb-teal); }
.jcbb-reader [aria-disabled="true"] { opacity: .45; }
.jcbb-reader__back { display: block; width: fit-content; padding: 12px 0; margin-top: 12px; font-size: 16px; }
.jcbb-reader a:focus-visible { outline: 3px solid var(--jcbb-teal); outline-offset: 5px; }
.jcbb-reader__view:focus { outline: 3px solid var(--jcbb-gold); outline-offset: 4px; }
.jcbb-reader__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; border-bottom: 1px solid #dfd4bd; padding-bottom: 20px; margin-bottom: 28px; }
.jcbb-reader__toolbar a { padding: 10px 0; }
.jcbb-reader h2.jcbb-reader__progress { font: 600 15px/1.5 system-ui, sans-serif; margin: 0 auto 28px; max-width: 36em; color: var(--jcbb-teal); }
.jcbb-reader__story { max-width: 32em; margin: 0 auto; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.8; }
.jcbb-reader__story p { margin-bottom: 1.1em; }
.jcbb-reader__story img { max-width: 100%; height: auto; }
.jcbb-reader__navigation { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 56em; margin: 40px auto 0; border-top: 1px solid #dfd4bd; padding-top: 24px; }
.jcbb-reader__ending { text-align: center; padding-top: clamp(64px, 10vw, 120px); padding-bottom: clamp(64px, 10vw, 120px); }
.jcbb-reader__ending h2 { font-size: clamp(48px, 7vw, 76px); margin: 24px 0; }
.jcbb-reader__ending .jcbb-reader__back { margin-left: auto; margin-right: auto; }
@media (min-width: 760px) { .jcbb-reader__landing { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; } }
@media (max-width: 380px) { .jcbb-reader__navigation .jcbb-reader__button { padding: 12px 16px; flex: 1; } }
@media print { .jcbb-reader [hidden] { display: block !important; } .jcbb-reader__navigation, .jcbb-reader__toolbar, .jcbb-reader__button, .jcbb-reader__back { display: none !important; } .jcbb-reader__view { box-shadow: none; break-after: page; } }