/* ==========================================================================
   Talk Gumbo — the book: reader, page layout and the shelf.
   Used by story pages and by "Arrange my book" in the writing desk.
   ========================================================================== */
:root { --f-text: "Newsreader", "Newsreader Fallback", Georgia, serif; --f-label: "Archivo", "Archivo Fallback", Arial, sans-serif; --f-sign: "Signature", "Brush Script MT", cursive; --gold: #E2C08D; --roux: #8A4B22; --cloth: #0A2E6E; --ease: cubic-bezier(.22, .8, .2, 1); }
html.book-open, html.book-open body { overflow: hidden; }

.book { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); color: #F3E9D8;
  background: radial-gradient(70% 70% at 50% 40%, #3a2a1e 0%, #1e1611 70%, #140f0b 100%); opacity: 0; transition: opacity .45s var(--ease); }
.book::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.book.is-on { opacity: 1; }
.book__bar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px clamp(14px, 3vw, 28px); }
.book__title { min-width: 0; margin: 0; font: italic 500 1.05rem var(--f-display); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book__tools { display: flex; gap: 8px; flex: none; }
.book__btn svg { width: 18px; height: 18px; }
.book__btn[data-book-sound] { display: inline-flex; align-items: center; gap: 8px; }
.book__btn { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(243,233,216,.35); background: rgba(0,0,0,.2); color: #F3E9D8; font: 600 .82rem var(--f-label); letter-spacing: .06em; }
.book__btn:hover { border-color: var(--gold); color: var(--gold); }
.book__btn--close { background: #F3E9D8; color: #1e1611; border-color: #F3E9D8; }
.book__btn--close:hover { background: var(--gold); color: #1e1611; }
.book__stage { position: relative; display: grid; place-items: center; padding: 4px 12px; min-height: 0; }
.book__flip { margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.book__nav { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(10px, 3vw, 28px); padding: 12px 14px 18px; }
.book__turn { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(243,233,216,.4); background: transparent; color: #F3E9D8; font: 600 .9rem var(--f-label); letter-spacing: .04em; }
.book__turn:hover:not([disabled]) { background: #F3E9D8; color: #1e1611; }
.book__turn[disabled] { opacity: .3; cursor: default; }
.book__count { min-width: 120px; text-align: center; font: italic 500 1rem var(--f-display); color: var(--gold); }

/* pages */
.bk-page { position: relative; overflow: hidden; background: #FBF6EC; color: #241C14; font: 400 16.5px/1.6 var(--f-text); }
.bk-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 30px 34px 22px; }
.bk-page.bk-left { background: linear-gradient(to left, rgba(80,55,30,.18), rgba(80,55,30,0) 9%), #FBF6EC; }
.bk-page.bk-right { background: linear-gradient(to right, rgba(80,55,30,.18), rgba(80,55,30,0) 9%), #FBF6EC; }
.bk-run { flex: none; height: 18px; margin-bottom: 14px; font: 600 10px/18px var(--f-label); font-stretch: 82%; letter-spacing: .18em; text-transform: uppercase; color: #9a8466; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid rgba(154,132,102,.25); }
.bk-body { flex: 1; min-height: 0; overflow: hidden; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.bk-folio { flex: none; height: 22px; margin-top: 10px; text-align: center; font: italic 500 13px/22px var(--f-display); color: #8a7457; }
.bk-body > * { margin: 0 0 .75em; }
.bk-body p + p { text-indent: 1.4em; margin-top: -.75em; }
.bk-body p.bk-cont { text-indent: 0; }
.bk-body p.bk-first::first-letter { font: 600 3.3em/.8 var(--f-display); float: left; margin: .07em .08em 0 0; color: var(--blue); font-variation-settings: "SOFT" 100, "WONK" 1; }
.bk-body h2, .bk-body h3, .bk-body h4 { font-family: var(--f-display); text-align: left; line-height: 1.2; color: #1B2333; margin: var(--bk-h-top) 0 var(--bk-h-bot); text-indent: 0; }
.bk-body h2 { font-size: 20px; } .bk-body h3 { font-size: 18px; } .bk-body h4 { font-size: 16.5px; }
.bk-body > h2:first-child, .bk-body > h3:first-child, .bk-body > h4:first-child { margin-top: 0; }
.bk-body figure { margin: .6em 0 1em; text-align: center; }
.bk-body figure img { margin: 0 auto; }
.bk-body img { max-width: 100%; height: auto; width: auto; margin: 0 auto; border-radius: 2px; object-fit: contain; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 6px 14px -8px rgba(60,40,20,.5); }
.bk-body figcaption { margin-top: .5em; font: 500 11.5px/1.4 var(--f-label); color: #8a7457; text-align: center; }
.bk-body blockquote { margin: .8em 0; padding: 0 0 0 .9em; border-left: 2px solid var(--blue); font: italic 17px/1.5 var(--f-display); text-align: left; }
.bk-body blockquote.pull-quote { border: 0; padding: 0; text-align: center; color: var(--blue); font-size: 19px; }
.bk-body a { color: var(--blue); }
.bk-body hr { border: 0; height: 18px; margin: 1em 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Cpath d='M10 13h34M76 13h34' stroke='%23C6B699' stroke-width='1.2'/%3E%3Cpath d='M66 4c-7 1-13 6-15 13l-1 4-2 3 1 .4 2-3 3-1c7-2 12-8 12-16z' fill='%23004AAD'/%3E%3C/svg%3E") center / 90px 18px no-repeat; }
.bk-body ul, .bk-body ol { padding-left: 1.3em; text-align: left; }
.bk-body p.cta a { font-weight: 700; }
.bk-video__go { display: inline-block; margin-top: 8px; padding: 10px 16px; border: 1px solid var(--blue); border-radius: 999px; text-decoration: none; font: 700 13px var(--f-label); }
.bk-opener { text-align: center; margin: 4px 0 1.1em !important; padding-bottom: .9em; border-bottom: 1px solid rgba(154,132,102,.3); }
.bk-opener h1 { margin: .2em 0 .25em; font: 600 25px/1.08 var(--f-display); letter-spacing: -.015em; color: #1B2333; text-wrap: balance; }
.bk-kicker { margin: 0; font: 700 10.5px var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--roux); }
.bk-by { margin: 0; font: italic 13px var(--f-text); color: #8a7457; }
.bk-endpaper .bk-run, .bk-endpaper .bk-folio { visibility: hidden; border: 0; }
.bk-endpaper .bk-body { display: grid; place-items: center; text-align: center; }
.bk-ex { width: 82%; padding: 30px 18px; border: 1px solid rgba(154,132,102,.35); outline: 1px solid rgba(154,132,102,.18); outline-offset: 6px; max-width: 80%; }
.bk-ex svg { width: 120px; margin: 14px auto; }
.bk-ex__k { margin: 0; font: 700 10.5px var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: var(--roux); }
.bk-ex__t { margin: .5em 0 0; font-family: var(--f-sign); font-size: 46px; line-height: 1.5; color: var(--blue); text-align: center; }
.bk-ex__d { margin: 0; font: italic 13px var(--f-text); color: #8a7457; }
.bk-blank .bk-body { display: grid; place-items: center; }
.bk-blank__f { width: 34px; height: 34px; color: #c9b38f; }

/* covers: blue cloth with gold foil */
.bk-page.bk-cover { padding: 0; background:
  radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.08), transparent 60%),
  repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px),
  repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px), var(--cloth); color: var(--gold); }
.bk-cover__in { position: absolute; inset: 16px; border: 1.5px solid rgba(226,192,141,.55); outline: 1px solid rgba(226,192,141,.25); outline-offset: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; text-align: center; }
.bk-cover__logo { width: 62%; filter: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(611%) hue-rotate(338deg) brightness(93%) contrast(88%); }
.bk-cover__rule { width: 60px; height: 1px; background: rgba(226,192,141,.6); }
.bk-cover__win { width: 70%; aspect-ratio: 4/3; border: 6px solid #F3E9D8; box-shadow: 0 10px 24px rgba(0,0,0,.4); overflow: hidden; }
.bk-cover__win { background: #F3E9D8; }
.bk-cover__win img { width: 100%; height: 100%; object-fit: contain; } /* a tall photo keeps its head */
.bk-cover h2 { margin: 6px 0 0; font: 600 23px/1.15 var(--f-display); letter-spacing: -.01em; color: #F3E9D8; text-wrap: balance; }
.bk-cover__by { margin: 0; font: 34px/1 var(--f-sign); color: var(--gold); }
.bk-cover__hint { margin-top: 6px; font: 600 10.5px var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: rgba(226,192,141,.75); }
.bk-cover__feather { width: 44px; height: 44px; color: var(--gold); }
.bk-cover__end { margin: 0; font: italic 600 30px var(--f-display); color: #F3E9D8; }
.bk-cover__next-k { margin: 14px 0 0; font: 700 10.5px var(--f-label); letter-spacing: .2em; text-transform: uppercase; color: rgba(226,192,141,.75); }
.bk-cover__next { margin-top: 14px; padding: 10px 18px; border: 1px solid rgba(226,192,141,.6); border-radius: 999px; background: rgba(0,0,0,.18); font: 600 15px/1.2 var(--f-display); color: var(--gold); cursor: pointer; }
.bk-cover__next:hover { background: var(--gold); color: #1e1611; }
.bk-cover__web { margin-top: 14px; font: 600 12px var(--f-label); letter-spacing: .08em; color: #F3E9D8; }
.bk-cover__site { margin: 8px 0 0; font: 600 10px var(--f-label); letter-spacing: .24em; text-transform: uppercase; color: rgba(226,192,141,.6); }
@media (max-width: 620px) {
  .bk-page { font-size: 16px; }
  .bk-sheet { padding: 22px 22px 16px; }
  .book__btn[data-book-sound] { width: 42px; padding: 0; justify-content: center; }
  .book__btn[data-book-sound] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .book__btn--close { padding: 0 14px; }
  .book__turn { padding: 0 14px; font-size: .82rem; }
}

.bk-body img.bk-ex__logo { width: 78%; max-width: 240px; margin: 14px auto 0; display: block; box-shadow: none; border-radius: 0; background: none; mix-blend-mode: multiply; } /* printed on the paper, not a photo */
.bk-ex__k { margin-bottom: 4px; }

/* ------------------------------------------------------------------
   The shelf — after the last page, the finished book is put away and
   the next stories wait as little books. Pick one and it grows into
   the big book and opens by itself.
   ------------------------------------------------------------------ */
.book__stage, .book__shelf { grid-row: 2; grid-column: 1; }
.book__stage { transition: transform .8s var(--ease), opacity .55s var(--ease); transform-origin: 30% 85%; }
.book.is-shelf .book__stage { transform: translate(-18%, 22%) scale(.16); opacity: 0; pointer-events: none; }
.book.is-arriving .book__stage { opacity: 0; transition: none; }
.book.no-anim .book__stage, .book.no-anim .book__shelf, .book.no-anim .mini { transition: none !important; }
.book__shelf { position: relative; z-index: 2; display: grid; place-items: center; min-height: 0; overflow: auto; padding: 8px 16px; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease) .25s, visibility 0s linear .8s; }
.book.is-shelf .book__shelf { opacity: 1; visibility: visible; transition: opacity .5s var(--ease) .35s, visibility 0s; }
.book.is-leaving .book__shelf { opacity: 0; transition: opacity .35s var(--ease); }

.shelf { width: min(100%, 980px); text-align: center; }
.shelf__k { margin: 0; font: 700 .74rem var(--f-label); font-stretch: 82%; letter-spacing: .2em; text-transform: uppercase; color: rgba(226,192,141,.8); }
.shelf__h { margin: .35rem 0 0; font: 500 clamp(1.9rem, 1.2rem + 2.4vw, 3rem)/1.05 var(--f-display); letter-spacing: -.02em; color: #F3E9D8; font-variation-settings: "SOFT" 80, "opsz" 144; }
.shelf__h em { color: var(--gold); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.shelf__hint { margin: .5rem 0 0; font: italic 1.05rem var(--f-text); color: rgba(243,233,216,.7); }
.shelf__row { --bw: 128px; --bh: 180px; display: flex; justify-content: center; align-items: flex-start; gap: clamp(18px, 3vw, 40px); margin: clamp(22px, 4vh, 40px) 0 0; }
.shelf__foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: clamp(14px, 3vh, 28px); }
.shelf__link { background: none; border: 0; padding: 10px 4px; font: 600 .95rem var(--f-label); letter-spacing: .04em; color: #F3E9D8; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: rgba(226,192,141,.6); cursor: pointer; }
.shelf__link:hover { color: var(--gold); }
.shelf__link--again { display: none; }

/* one little book */
.mini { position: relative; display: flex; flex-direction: column; align-items: center; width: calc(var(--bw) + 40px); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: center;
  opacity: 0; transform: translateY(26px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(.45s + var(--i, 0) * .09s); }
.book.is-shelf .mini { opacity: 1; transform: none; }
.mini__book { position: relative; display: block; width: var(--bw); height: var(--bh); perspective: 900px; }
/* the wooden plank each book stands on — neighbours join into one shelf */
.mini__book::after { content: ""; position: absolute; left: calc(-20px - clamp(9px, 1.5vw, 20px)); right: calc(-20px - clamp(9px, 1.5vw, 20px)); bottom: -14px; height: 14px; border-radius: 2px;
  background: linear-gradient(#a8703f, #7a4b26 55%, #5b3519); box-shadow: 0 10px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.mini__cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 10px; border-radius: 2px 6px 6px 2px;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.14), transparent 55%), linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.22)), var(--cloth); box-shadow: inset 6px 0 0 rgba(0,0,0,.28), inset 7px 0 0 rgba(226,192,141,.25), 8px 10px 18px rgba(0,0,0,.45);
  outline: 1px solid rgba(226,192,141,.45); outline-offset: -6px; transform-origin: left center; transition: transform .45s var(--ease), box-shadow .45s var(--ease); z-index: 1; }
.mini__mark { width: 72%; filter: brightness(0) saturate(100%) invert(84%) sepia(22%) saturate(611%) hue-rotate(338deg) brightness(93%) contrast(88%); }
.mini__win { width: 82%; aspect-ratio: 4/3; border: 3px solid #F3E9D8; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.mini__win { background: #F3E9D8; }
.mini__win img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mini__q { display: grid; place-items: center; width: 64%; aspect-ratio: 1; margin-top: 6px; border: 1.5px dashed rgba(226,192,141,.7); border-radius: 50%; font: italic 600 3rem/1 var(--f-display); color: var(--gold); }
.mini__sig { margin-top: auto; font: 1.15rem/1 var(--f-sign); color: var(--gold); white-space: nowrap; }
.mini__cap { display: flex; flex-direction: column; gap: 3px; margin-top: 26px; }
.mini__k { font: 700 .66rem var(--f-label); font-stretch: 82%; letter-spacing: .16em; text-transform: uppercase; color: rgba(226,192,141,.85); }
.mini__title { font: 560 1.06rem/1.22 var(--f-display); color: #F3E9D8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.mini__m { font: italic .92rem var(--f-text); color: rgba(243,233,216,.6); }
.mini:hover .mini__cover, .mini:focus-visible .mini__cover { transform: translateY(-10px) rotateY(-14deg); box-shadow: inset 6px 0 0 rgba(0,0,0,.28), inset 7px 0 0 rgba(226,192,141,.25), 18px 22px 28px rgba(0,0,0,.5); }
.mini:hover .mini__title, .mini:focus-visible .mini__title { color: var(--gold); }
.mini:focus-visible { outline: none; }
.mini:focus-visible .mini__book { outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 4px; }
.mini--done .mini__cover { filter: saturate(.55) brightness(.8); }
.mini--done .mini__cover::before { content: "✓"; position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1e1611; font: 700 .95rem var(--f-label); box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.mini--surprise .mini__cover { background: radial-gradient(120% 90% at 30% 0%, #3b4a6b, #1E2A44 60%, #121a2e); }
.mini--surprise:hover .mini__q { animation: miniwobble .7s var(--ease); }
@keyframes miniwobble { 30% { transform: rotate(-14deg) scale(1.08); } 60% { transform: rotate(10deg); } }
.mini.is-picked { opacity: 0 !important; transition: opacity .2s; }

/* the little book that flies up and becomes the big one */
.mini__ghost { position: fixed; z-index: 5; transform-origin: 0 0; pointer-events: none; perspective: none; }
.mini__ghost::after { display: none; }
.mini__ghost .mini__cover { transform: none !important; }
.mini__ghost.is-flying .mini__cover { box-shadow: inset 6px 0 0 rgba(0,0,0,.28), 0 30px 50px rgba(0,0,0,.55); }
.mini__ghost.is-gone { opacity: 0; transition: opacity .6s var(--ease); }

@media (max-width: 760px) {
  .shelf__row { --bw: 96px; --bh: 136px; display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 30px 40px; }
  .mini { width: calc(var(--bw) + 14px); }
  .mini__book::after { left: -18px; right: -18px; bottom: -11px; height: 11px; }
  .mini__cover { gap: 5px; padding: 9px 7px 7px; }
  .mini__q { font-size: 2.2rem; }
  .mini__sig { font-size: .9rem; }
  .mini__cap { margin-top: 20px; }
  .mini__title { font-size: .98rem; }
  .mini__m { display: none; }
  .mini--done { display: none; }
  .shelf__link--again { display: inline; }
  .shelf__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .book__stage, .book__shelf, .mini { transition: none !important; }
}
.mini__ghost { will-change: transform, opacity; contain: layout paint; }
.mini__ghost .mini__cover { transition: none; }
.mini__ghost.is-waiting .mini__cover { box-shadow: inset 6px 0 0 rgba(0,0,0,.28), 0 24px 44px rgba(0,0,0,.5); }
.book.is-leaving .mini:not(.is-picked) { opacity: 0; transform: translateY(14px); transition: opacity .3s var(--ease), transform .3s var(--ease); transition-delay: 0s; }
.book.is-arriving .book__flip { filter: none; }
.book__nav { transition: opacity .4s var(--ease); }
.book.is-shelf .book__nav { opacity: 0; pointer-events: none; }
.mini__ghost .mini__cover { overflow: hidden; }
.mini__ghost .mini__cover::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; opacity: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,232,190,.32), transparent); transform: translateX(-120%) skewX(-12deg); }
.mini__ghost.is-waiting .mini__cover::after { opacity: 1; animation: ghostsheen 1.1s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes ghostsheen { to { transform: translateX(330%) skewX(-12deg); } }
@media (prefers-reduced-motion: reduce) { .mini__ghost .mini__cover::after { display: none; } }


/* her bold one-line sub-headings, and the three spacing choices in "Arrange my book" */
.bk-page { --bk-h-top: 1.3em; --bk-h-bot: .5em; }
.bk-sp-snug { --bk-h-top: .8em; --bk-h-bot: .3em; }
.bk-sp-roomy { --bk-h-top: 2em; --bk-h-bot: .8em; }
.bk-body p.bk-sub { text-indent: 0; text-align: left; margin: var(--bk-h-top) 0 var(--bk-h-bot); }
.bk-body > p.bk-sub:first-child { margin-top: 0; }
.bk-body p.bk-sub + p, .bk-body h2 + p, .bk-body h3 + p, .bk-body h4 + p, .bk-body figure + p, .bk-body blockquote + p { text-indent: 0; margin-top: 0; }
.bk-body table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.bk-body th, .bk-body td { padding: 4px 6px; border-bottom: 1px solid rgba(154,132,102,.35); vertical-align: top; }
.bk-body li { margin-bottom: .25em; }

.bk-page.bk-phone { font-size: 16px; }
.bk-page.bk-phone .bk-sheet { padding: 22px 22px 16px; }
@media (max-width: 620px) { .book__turn { white-space: nowrap; font-size: .78rem; padding: 0 12px; } .book__count { min-width: 84px; font-size: .92rem; } }