/* One reading room, with physical page dimensions and artwork left intact. */
@font-face { font-family: Yomogi; src: url('/introducing/assets/home-20260916/yomogi-home-complete-v4.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
:root { --reading-paper: #fffaf2; --reading-ink: #67594d; --reading-rose: #956675; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body.story-home { background: #fffbf5; }
body.story-home .button:not(.light) { background: #f1e2dc; color: #825864; border: 1px solid #dbbfb7; box-shadow: none; }
body.story-home .button:not(.light):hover { background: #ead8d0; }
body.story-home .nav-cta { background: #f4e9e2; color: #825864; }
body.story-home .hero { padding-bottom: 70px; }
body.story-home .hero-picture { background: transparent; }
body.story-home .sample-showcase { padding-bottom: 80px; }
body.story-home .showcase-grid { max-width: 880px; gap: 80px; }
body.story-home .sample-art-frame { border-radius: 3px; padding: 7px; box-shadow: 2px 12px 24px #644b3512; }
body.story-home .sample-kind { font-family: inherit; letter-spacing: .06em; }
body.story-home .sample-copy p { font-size: 14px; }
body.story-home .sample-copy button, body.story-home .sample-copy a { min-height: 44px; }
body.story-home .showcase-note { margin-top: 44px; }
body.story-home .origin-section { background: #f5f1e8; padding: 100px 0; }
body.story-home .origin-picture { max-width: 960px; margin: 54px auto 42px; border-radius: 0; overflow: visible; box-shadow: none; background: transparent; }
body.story-home .origin-picture img { width: 100%; height: auto; border-radius: 0; object-fit: contain; }
body.story-home .origin-letter { max-width: 650px; margin: auto; padding: 20px 0 0; background: transparent; box-shadow: none; border: 0; }
body.story-home .origin-letter > p { line-height: 2.4; }
body.story-home .origin-letter .letter-from { font-size: 12px; color: #997f6b; letter-spacing: .16em; margin-bottom: 30px; }

.reading-shelf { padding: 85px 0 80px; color: var(--reading-ink); background: #f6f0e6; border-block: 1px solid #e4d9c755; }
.reading-shelf .wrap { max-width: 1130px; }
.reading-heading { text-align: center; }
.reading-heading .eyebrow { color: #927d65; margin-bottom: 17px; }
.reading-heading h2 { font-size: clamp(30px, 3.5vw, 45px); font-weight: 400; line-height: 1.65; margin: 0; }
.reading-heading h2 span { display: inline-block; }
.reading-heading > p:last-child { font-size: 14px; color: #897a6c; margin: 20px 0 0; }
.shelf-display { display: grid; grid-template-columns: .94fr 1fr 1fr; grid-template-rows: auto 12px auto; gap: 0 54px; padding: 64px 24px 0; align-items: end; }
.shelf-companion { grid-column: 1; grid-row: 1; margin: 0 -30px -8px; align-self: end; position: relative; z-index: 1; }
.shelf-companion img { display: block; width: 100%; height: auto; }
.shelf-companion figcaption { position: absolute; top: -10px; left: 10%; width: 90%; text-align: center; font: 19px/1.6 Yomogi, sans-serif; color: #99836d; transform: rotate(-4deg); }
.shelf-book { display: contents; }
.shelf-book:first-of-type > * { grid-column: 2; }
.shelf-book:last-of-type > * { grid-column: 3; }
.shelf-cover { grid-row: 1; display: block; width: 100%; max-width: 236px; margin: 0 auto 4px; perspective: 1200px; position: relative; text-decoration: none; border: 0; background: transparent; -webkit-tap-highlight-color: transparent; }
.shelf-volume { display: block; position: relative; aspect-ratio: 1122/1402; border-radius: 2px 4px 4px 2px; transform-style: preserve-3d; transform: rotateY(-12deg) rotateZ(-2deg); transform-origin: center bottom; transition: transform .55s ease, box-shadow .55s ease; box-shadow: 5px 9px 13px #68523e25, 1px 1px 2px #68523e3d; }
.shelf-book:last-of-type .shelf-volume { transform: rotateY(-12deg) rotateZ(2deg); }
.shelf-volume::before { content: ''; position: absolute; top: 2px; bottom: 1px; left: -7px; width: 9px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, #aa9780, #d5c3aa 35%, #b5a189); transform: rotateY(-20deg); transform-origin: right; }
.shelf-volume::after { content: ''; position: absolute; top: 3px; bottom: 0; right: -7px; width: 7px; background: repeating-linear-gradient(90deg, #ece2d0 0 1px, #fff9ee 1px 2px); border-block: 2px solid #c4b092; border-right: 1px solid #c4b092; transform: skewY(-9deg); z-index: -1; }
.shelf-volume img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; position: relative; background: #faf2e5; }
.shelf-cover:hover .shelf-volume, .shelf-cover:focus-visible .shelf-volume { transform: translateY(-8px) rotateY(-5deg) rotateZ(0); box-shadow: 6px 16px 19px #68523e29; }
.shelf-cover:focus-visible { outline: 3px solid #879fa9; outline-offset: 12px; border-radius: 3px; }
.shelf-plank { grid-column: 1/-1; grid-row: 2; height: 12px; margin-inline: -25px; background: #d7c4a7; border-top: 3px solid #e8dac4; border-radius: 1px; box-shadow: 0 8px 12px #88725217; position: relative; }
.shelf-caption { grid-row: 3; align-self: start; text-align: center; padding: 26px 0 0; }
.shelf-caption .book-kind { font-size: 11px; letter-spacing: .13em; color: #9b856f; margin: 0 0 7px; }
.shelf-caption h3 { font: 400 23px/1.65 Yomogi, sans-serif; margin: 0; color: #725e4f; min-height: 76px; }
.shelf-caption h3 span { display: block; white-space: nowrap; }
.shelf-caption .book-read-link { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; font-size: 13px; color: #815f5c; text-decoration: none; border-bottom: 1px solid #cbb5a3; padding-inline: 8px; }
.book-read-link:hover { border-color: #815f5c; }
.shelf-footnote { text-align: center; margin: 42px 0 0; font-size: 12px; color: #9b8977; }
.pet-story-invitation { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 46px; max-width: 760px; margin: 72px auto 0; padding-top: 54px; border-top: 1px solid #d9cbb8; text-align: left; }
.pet-story-cover { display: block; transform: rotate(-3deg); box-shadow: 3px 9px 18px #6c554222; border-radius: 2px; transition: transform .35s ease; }
.pet-story-cover:hover { transform: rotate(0); }
.pet-story-cover img { display: block; width: 100%; height: auto; border-radius: 2px; }
.pet-story-invitation h3 { font: 400 30px/1.7 Yomogi, sans-serif; margin: 6px 0 15px; }
.pet-story-invitation p { font-size: 14px; line-height: 2.1; }
.pet-story-invitation .text-link { min-height: 44px; }

/* Keep words and drawings in the flow: no fixed-height text/illustration overlap. */
body.story-home .bonda-core-card { display: flex; flex-direction: column; min-height: 0; padding: 36px 32px 22px; border-radius: 12px; box-shadow: none; border: 0; }
body.story-home .bonda-core-card.cherish { background: #f7eeea; }
body.story-home .bonda-core-card.grow { background: #edf2f1; }
body.story-home .bonda-core-card h3 { font-size: 32px; line-height: 1.65; }
body.story-home .bonda-core-card > p { font-size: 14px; }
body.story-home .bonda-core-card .bonda-core-whisper { align-self: flex-start; background: transparent; box-shadow: none; border-radius: 0; padding: 0 !important; transform: none; backdrop-filter: none; }
body.story-home .bonda-core-whisper::before, body.story-home .bonda-core-card.grow::after, body.story-home .bonda-core-visual::before { display: none; }
body.story-home .bonda-core-visual { position: relative; flex: 0 0 245px; width: 100%; height: 245px; bottom: auto; margin-top: auto; padding-top: 24px; }
body.story-home .bonda-core-memory { font-size: 12px; padding: 12px 15px; min-width: 0; }
body.story-home .bonda-core-memory.m1 { left: 0; top: 17%; right: auto; bottom: auto; }
body.story-home .bonda-core-memory.m2 { right: 0; top: 35%; left: auto; bottom: auto; }
body.story-home .bonda-core-memory.m3 { left: 0; bottom: 21%; right: auto; top: auto; }
body.story-home .bonda-core-memory.m4 { right: 0; bottom: 8%; left: auto; top: auto; }
body.story-home .bonda-core-arrow { display: none; }
body.story-home .bonda-core-pet { width: 164px; height: 180px; }
body.story-home .bonda-core-pet img { width: 160px; height: 160px; }

.reading-dialog { --page-width: 320px; box-sizing: border-box; width: min(1280px, calc(100vw - 40px)); max-width: none; height: min(980px, calc(100dvh - 40px)); max-height: none; padding: 0; margin: auto; border: 1px solid #e0d4c3; border-radius: 8px; color: var(--reading-ink); background: #f7f2e9; box-shadow: 0 24px 100px #352b2640; overflow: hidden; }
.reading-dialog::backdrop, .art-dialog::backdrop { background: #3e362ce0; backdrop-filter: blur(5px); }
.reading-dialog[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.reading-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 24px; border-bottom: 1px solid #dfd3c066; }
.reading-toolbar h2 { font: 400 20px/1.5 Yomogi, sans-serif; margin: 0; }
.reading-toolbar .reading-kicker { display: block; margin-bottom: 2px; color: #9a8772; font: 10px/1.5 system-ui, sans-serif; letter-spacing: .14em; }
.reading-close { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #d8cab7; border-radius: 50%; background: transparent; color: #776656; font: 28px/1 system-ui, sans-serif; cursor: pointer; }
.reading-close:hover { background: #ede3d6; }
.reading-stage { display: flex; justify-content: center; align-items: center; min-height: 0; padding: 18px 22px; overflow: hidden; position: relative; isolation: isolate; }
.reading-book-host { position: relative; flex: 0 0 auto; transition: transform .55s ease; filter: drop-shadow(0 14px 15px #57412c21); }
.reading-book-host[data-cover="front"][data-orientation="landscape"] { transform: translateX(calc(var(--page-width) / -2)); }
.reading-book-host[data-cover="back"][data-orientation="landscape"] { transform: translateX(calc(var(--page-width) / 2)); }
.reading-book-host.is-arriving { opacity: 0; }
.reading-book { position: relative; }
.reading-page { background: #fffaf2; overflow: hidden; box-sizing: border-box; }
.reading-page img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fffaf2; user-select: none; -webkit-user-drag: none; }
.reading-page[data-spread-side] img { position: absolute; inset: 0 auto 0 0; width: 200%; max-width: none; height: 100%; object-fit: fill; }
.reading-page[data-spread-side="right"] img { left: -100%; }
.reading-image-error { position: absolute; inset: 0; display: grid; align-content: center; padding: 14%; font: 14px/1.8 system-ui, sans-serif; background: #fffaf2; text-align: center; }
.reading-page.has-image-error img { visibility: hidden; }
.reading-page[data-density="soft"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid #6a513208; }
.reading-page.--left::after { background: linear-gradient(90deg, transparent 88%, #654c2d0d 99%, #654c2d1a); }
.reading-page.--right::after { background: linear-gradient(90deg, #654c2d17, transparent 12%); }
.reading-endpaper, .reading-backcover { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 10%; box-sizing: border-box; color: #9d826a; background: #f5ecdc; }
.reading-endpaper img, .reading-backcover img { width: 44px; height: 44px; object-fit: contain; margin-bottom: 22px; background: transparent; }
.reading-endpaper p, .reading-backcover p { font: clamp(11px, 1.4vw, 18px)/2 Yomogi, sans-serif; }
.reading-backcover small { font: 10px/1.8 system-ui, sans-serif; letter-spacing: .18em; margin-top: 26px; }
.reading-controls { padding: 10px 24px 14px; border-top: 1px solid #dfd3c066; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.reading-pagination { display: flex; justify-content: center; align-items: center; gap: 22px; }
.reading-nav { border: 1px solid #d6c5b0; border-radius: 40px; min-width: 116px; min-height: 44px; padding: 9px 17px; color: #76614e; background: #fffbf5; font: 13px/1.5 system-ui, sans-serif; cursor: pointer; }
.reading-nav:hover:enabled { background: #ece1d2; }
.reading-nav:disabled { opacity: .32; cursor: default; }
.reading-position { min-width: 130px; text-align: center; margin: 0; font-size: 12px; color: #8a7966; font-variant-numeric: tabular-nums; }
.reading-extras { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: #8a7966; }
.reading-extras button { border: 0; background: transparent; color: #76614e; font: inherit; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; min-height: 44px; }
.reading-extras button:disabled { opacity: .35; cursor: default; }
.reading-extras select { max-width: 180px; border: 1px solid #d6c5b0; border-radius: 4px; background: transparent; color: #76614e; min-height: 44px; padding: 0 8px; font: inherit; }
.reading-hint { margin: 0; font-size: 11px; }
.reading-hint .mobile-hint { display: none; }
.reading-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #937e66; font: 19px/1.8 Yomogi, sans-serif; pointer-events: none; }
.reading-loading[hidden] { display: none; }
.reading-cover-flight { position: fixed; object-fit: contain; z-index: 100; pointer-events: none; border-radius: 2px; box-shadow: 0 12px 28px #533e2a24; }
.reading-fallback .reading-page { display: none; }
.reading-fallback .reading-page.is-current { display: block; position: absolute; left: 0; top: 0; width: 50%; height: 100%; }
.reading-fallback .reading-page.is-current:nth-child(odd) { left: 50%; }
.art-dialog { width: min(1200px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-width: none; max-height: none; box-sizing: border-box; padding: 0; margin: auto; background: #fcf7ef; color: #776656; border: 1px solid #d8cab7; border-radius: 6px; overflow: hidden; }
.art-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.art-dialog .reading-toolbar h2 { font: 15px/1.7 system-ui, sans-serif; }
.art-scroll { overflow: auto; overscroll-behavior: contain; padding: 18px; -webkit-overflow-scrolling: touch; }
.art-canvas { display: flex; width: min(100%, calc((100dvh - 156px) * var(--art-ratio, .8))); aspect-ratio: var(--art-ratio, .8); margin: auto; }
.art-canvas img { display: block; min-width: 0; width: 100%; flex: 1 1 0; height: 100%; object-fit: contain; }
.art-scroll.is-zoomed .art-canvas { width: max(100%, min(1586px, 280vw)); max-width: none; }
.art-zoom { border: 0; color: #79624f; background: transparent; min-height: 44px; padding: 0 12px; cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; margin-left: auto; }
html.reading-open { overflow: hidden; }
html.reading-open body { position: fixed; width: 100%; overflow: hidden; }
.reading-dialog button:focus-visible, .reading-dialog select:focus-visible, .art-dialog button:focus-visible, .art-scroll:focus-visible { outline: 2px solid #879fa9; outline-offset: 3px; }

@media (max-width: 800px) {
  body.story-home .showcase-grid { gap: 32px; }
  body.story-home .sample-showcase { padding-bottom: 58px; }
  body.story-home .origin-section { padding: 65px 0; }
  body.story-home .origin-picture { margin: 34px -14px 28px; }
  body.story-home .bonda-core-card { padding: 28px 24px 20px; }
  body.story-home .bonda-core-card h3 { font-size: 29px; }
  body.story-home .bonda-core-visual { flex-basis: 250px; }
  .reading-shelf { padding: 60px 0 54px; }
  .shelf-display { gap: 0 28px; padding: 46px 12px 0; grid-template-columns: .8fr 1fr 1fr; }
  .shelf-caption h3 { font-size: 19px; min-height: 65px; }
  .shelf-companion figcaption { font-size: 16px; top: -20px; }
}
@media (max-width: 600px) {
  body.story-home .wrap { padding-inline: 24px; }
  body.story-home .header { gap: 14px; }
  body.story-home .hero { padding-bottom: 46px; }
  body.story-home .sample-copy p { font-size: 13px; }
  .reading-heading h2 { font-size: 30px; }
  .reading-heading h2 span { display: block; }
  .reading-heading > p:last-child { font-size: 12px; }
  .shelf-display { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 10px auto; gap: 0 25px; padding: 16px 8px 0; }
  .shelf-companion { grid-column: 1/-1; grid-row: 1; width: min(240px, 100%); margin: 44px auto 24px; }
  .shelf-companion figcaption { left: 50%; right: auto; top: -30px; font-size: 17px; width: max-content; max-width: 100%; white-space: nowrap; writing-mode: horizontal-tb; transform: translateX(-50%) rotate(-4deg); }
  .shelf-book:first-of-type > * { grid-column: 1; }
  .shelf-book:last-of-type > * { grid-column: 2; }
  .shelf-cover { grid-row: 2; width: calc(100% - 5px); max-width: 200px; }
  .shelf-plank { grid-row: 3; height: 10px; margin-inline: -13px; }
  .shelf-caption { grid-row: 4; padding-top: 21px; }
  .shelf-caption h3 { font-size: 17px; min-height: 59px; }
  .shelf-caption .book-kind { font-size: 9px; letter-spacing: .05em; }
  .shelf-caption .book-read-link { font-size: 12px; gap: 10px; }
  .shelf-footnote { font-size: 11px; margin-top: 30px; }
  .pet-story-invitation { grid-template-columns: 114px 1fr; gap: 24px; margin-top: 48px; padding-top: 36px; }
  .pet-story-invitation h3 { font-size: 24px; margin: 0 0 10px; }
  .pet-story-invitation p { font-size: 12px; }
  .pet-story-invitation .eyebrow { font-size: 10px; }
  .pet-story-invitation .text-link { font-size: 12px; }
  .reading-dialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .reading-toolbar { padding: max(10px, env(safe-area-inset-top)) 16px 10px; gap: 10px; }
  .reading-toolbar h2 { font-size: 17px; }
  .reading-toolbar .reading-kicker { font-size: 9px; }
  .reading-stage { padding: 12px 8px; }
  .reading-controls { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); gap: 4px; }
  .reading-pagination { width: 100%; gap: 10px; }
  .reading-nav { min-width: 88px; padding-inline: 12px; font-size: 12px; }
  .reading-position { min-width: 88px; font-size: 11px; }
  .reading-hint { flex-basis: 100%; text-align: center; order: 2; }
  .reading-hint .desktop-hint { display: none; }
  .reading-hint .mobile-hint { display: inline; }
  .reading-extras { gap: 13px; }
  .art-dialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .art-scroll { padding: 10px; }
  .art-dialog .reading-toolbar h2 { font-size: 12px; }
  .art-zoom { padding: 0 3px; font-size: 11px; }
  .art-canvas { width: min(100%, calc((100dvh - 116px) * var(--art-ratio, .8))); }
}
@media (max-width: 360px) {
  .shelf-caption h3 { font-size: 15px; }
  .shelf-companion figcaption { font-size: 16px; }
  .reading-extras { gap: 9px; }
}
@media (max-height: 520px) {
  .reading-dialog { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .reading-toolbar { padding-block: 5px; }
  .reading-toolbar .reading-kicker, .reading-hint { display: none; }
  .reading-controls { padding-block: 5px; flex-direction: row; justify-content: center; gap: 18px; }
  .reading-pagination { width: auto; gap: 10px; }
  .reading-extras label { display: none; }
  .reading-stage { padding-block: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .shelf-volume, .pet-story-cover, .reading-book-host { transition: none; }
  .shelf-cover:hover .shelf-volume, .shelf-cover:focus-visible .shelf-volume { transform: none; }
}