/** Shopify CDN: Minification failed

Line 1931:0 Unexpected "}"

**/
@import url("https://use.typekit.net/yjt3ihz.css");

.cch-reader {
  --cch-cream: #f8e8c5;
  --cch-paper: #f9ecda;
  --cch-red: #bb3428;
  --cch-blue: #3c6983;
  --cch-green: #4b6e42;
  --cch-gold: #aa9914;
  --cch-burgundy: #702b3f;
  --cch-ink: #3d342d;

  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--cch-cream);
  color: var(--cch-ink);
  font-family: Garamond, Georgia, serif;
}

.cch-reader *,
.cch-reader *::before,
.cch-reader *::after {
  box-sizing: border-box;
}

.cch-reader [hidden] {
  display: none !important;
}

/* Screens */

.cch-screen {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100svh;
  overflow-y: auto;
  padding: 8px 16px 24px;
  text-align: center;
  opacity: 1;
}

.cch-screen.is-active {
  display: block;
}

.cch-house.is-active,
.cch-family.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.cch-screen__content {
  width: min(100%, 1100px);
  margin: 0 auto;
}

.cch-screen__title {
  margin: 0 0 4px;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}

.cch-screen__text {
  max-width: 650px;
  margin: 0 auto;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  line-height: 1.3;
}

/* House and family artwork */

.cch-house-placeholder,
.cch-family-placeholder {
  display: grid;
  width: min(88vw, 1000px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  place-items: center;
  border: 0;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(60, 105, 131, 0.22), rgba(75, 110, 66, 0.18)),
    var(--cch-paper);
  color: var(--cch-ink);
  font-size: clamp(1.3rem, 4vw, 2.5rem);
}

.cch-art-screen__media {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

.cch-house-button {
  appearance: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.cch-house-button .cch-art-screen__media {
  pointer-events: none;
}

.cch-house-button:hover,
.cch-house-button:focus-visible {
  outline: 3px solid var(--cch-burgundy);
  outline-offset: 4px;
}

.cch-house-overlay {
  position: static;
  width: min(94vw, 700px);
  margin: 8px auto 0;
  padding: 0;
  background: transparent;
}

.cch-house-overlay .cch-screen__title {
  margin: 0 0 3px;
}

.cch-family .cch-family-placeholder {
  margin-top: 0;
}

/* Family transition */

.cch-screen.is-fading {
  opacity: 0;
  transition: opacity 650ms ease;
}

/* Library */

.cch-library {
  background: var(--cch-paper);
}

.cch-library .cch-screen__content {
  width: min(100%, 1280px);
  margin: 0 auto;
}

.cch-library__header {
  margin: 0 0 8px;
}

.cch-library .cch-screen__title {
  margin: 0 0 4px;
}

.cch-language-switcher {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 10px;
}

.cch-language-button,
.cch-reader-control {
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid var(--cch-blue);
  border-radius: 999px;
  background: transparent;
  color: var(--cch-blue);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cch-language-button {
  min-width: 110px;
}

.cch-language-button.is-selected,
.cch-reader-control:hover,
.cch-reader-control:focus-visible,
.cch-reader-control.is-playing {
  background: var(--cch-blue);
  color: white;
}

.cch-language-button:focus-visible,
.cch-reader-control:focus-visible,
.cch-library-cover:focus-visible,
.cch-object:focus-visible {
  outline: 4px solid var(--cch-gold);
  outline-offset: 3px;
}

.cch-bookshelf {
  position: relative;
  width: min(100%, 1200px, calc((100svh - 150px) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: var(--cch-paper);
}

.cch-bookshelf--illustrated {
  display: block;
}

.cch-bookshelf__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.cch-library-cover {
  position: absolute;
  z-index: 2;
  display: grid;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: transparent;
  color: white;
  box-shadow:
    2px 4px 7px rgba(46, 29, 20, .24),
    0 9px 13px rgba(46, 29, 20, .16);
  overflow: visible;
  transform-origin: center bottom;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button.cch-library-cover {
  cursor: pointer;
}

button.cch-library-cover:hover,
button.cch-library-cover:focus-visible {
  transform: translateY(-3px) scale(1.015);
}

.cch-library-cover__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
  pointer-events: none;
}

.cch-library-cover__placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 6px;
  place-items: center;
  border-radius: inherit;
  background: var(--cch-red);
  font-size: clamp(.55rem, 1.1vw, .9rem);
  line-height: 1.1;
  text-align: center;
}

.cch-library-cover--locked,
.cch-library-cover--coming-soon {
  filter: saturate(.68) brightness(.84);
}

.cch-library-cover__badge {
  position: absolute;
  inset: auto 50% 7% auto;
  z-index: 3;
  min-width: max-content;
  max-width: 120%;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(61, 52, 45, .86);
  color: white;
  font-size: clamp(.55rem, 1vw, .78rem);
  font-weight: 700;
  line-height: 1;
  transform: translateX(50%);
  pointer-events: none;
}

.cch-library-cover--locked .cch-library-cover__badge {
  padding: 5px 7px;
  font-size: clamp(.85rem, 1.8vw, 1.25rem);
}

/* Legacy generic shelf buttons remain usable until the illustrated JSON loads. */
.cch-bookshelf:not(.cch-bookshelf--illustrated) {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: clamp(14px, 3vw, 28px);
  height: auto;
  aspect-ratio: auto;
}

.cch-book {
  display: grid;
  min-height: 210px;
  padding: 18px;
  place-items: center;
  border: 0;
  border-radius: 12px 18px 18px 12px;
  background: var(--cch-red);
  color: white;
  box-shadow: 8px 8px 0 rgba(112, 43, 63, 0.2), 0 12px 28px rgba(61, 52, 45, 0.16);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
}

button.cch-book { cursor: pointer; }
button.cch-book:hover,
button.cch-book:focus-visible { transform: translateY(-4px); }
.cch-book--locked { background: var(--cch-blue); opacity: 0.82; }
.cch-book__lock { display: block; margin-bottom: 8px; font-size: 1.8rem; }

/* Interactive reader */

.cch-book-reader {
  padding: 0;
  overflow: hidden;
  background: var(--cch-light, #f9ecda);
}

.cch-book-reader__shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100svh;
  min-height: 0;
  background: var(--cch-paper);
}

.cch-reader-toolbar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: auto auto minmax(130px, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 2px solid rgba(170, 153, 20, 0.55);
  background: rgba(248, 232, 197, 0.97);
}

.cch-reader-control {
  min-width: 48px;
  padding: 8px 13px;
  border-radius: 13px;
}

.cch-reader-control:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.cch-reader-position {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--cch-burgundy);
  font-family: Garamond, Georgia, serif;
  font-size: clamp(1rem, 2.1vw, 1.4rem);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cch-reader-notice {
  position: relative;
  z-index: 25;
  padding: 8px 14px;
  border-bottom: 1px solid var(--cch-gold);
  background: #fff3d4;
  color: #6a3a00;
  font-weight: 700;
}

.cch-spread-frame {
  display: grid;
  min-height: 0;
  padding: 8px 12px;
  place-items: center;
  overflow: hidden;
  background: var(--cch-paper);
}

.cch-spread-stage {
  position: relative;
  width: min(100%, calc((100svh - 150px) * 16 / 9), 1440px);
  max-height: calc(100svh - 150px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: var(--cch-paper);
  box-shadow: 0 14px 34px rgba(61, 52, 45, 0.16);
  isolation: isolate;
  perspective: 1600px;
}

.cch-spread-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--cch-paper);
}

.cch-object {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.cch-text {
  overflow: hidden;
  white-space: pre-wrap;
  pointer-events: none;
}

/* Flaps */

.cch-flap {
  z-index: 10;
  overflow: visible;
  cursor: pointer;
  perspective: 1500px;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

.cch-flap__reveal,
.cch-flap__card,
.cch-flap__front,
.cch-flap__inside {
  position: absolute;
  inset: 0;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.cch-flap__reveal {
  z-index: 0;
}

.cch-flap__card {
  z-index: 2;
  transform: rotateX(0deg) rotateY(0deg) translateZ(1px);
  transform-origin: var(--origin, top center);
  transform-style: preserve-3d;
  transition: transform var(--speed, 0.7s) cubic-bezier(0.22, 0.72, 0.2, 1), filter var(--speed, 0.7s) ease;
  will-change: transform;
}

.cch-flap.is-open .cch-flap__card {
  transform: var(--open-transform, rotateX(155deg) translateZ(2px));
  filter: drop-shadow(0 12px 9px rgba(61, 52, 45, 0.28));
}

.cch-flap__front,
.cch-flap__inside {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.cch-flap__front {
  z-index: 2;
}

.cch-flap__inside {
  z-index: 1;
  transform: var(--inside-transform, rotateX(180deg));
}

.cch-clip-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Mirrors and hotspots */

.cch-mirror {
  z-index: 8;
  overflow: hidden;
  border: 4px solid var(--cch-gold);
  border-radius: 50%;
  background: #b8ccd5;
  cursor: pointer;
}

.cch-mirror video,
.cch-mirror img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}

.cch-hotspot {
  z-index: 12;
  overflow: hidden;
  contain: paint;
  border: 2px dashed rgba(90, 116, 2, 0.42);
  border-radius: 10px;
  background: rgba(90, 116, 2, 0.06);
  cursor: pointer;
}

.cch-hotspot.has-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.72) 50%, transparent 80%);
  transform: translateX(-130%);
  animation: cch-sheen 1.1s 0.35s 1 forwards;
  pointer-events: none;
}

.cch-hotspot.shimmer-finished::after {
  content: none;
}

.cch-caption {
  min-height: 46px;
  padding: 9px 16px 12px;
  border-top: 1px solid rgba(170, 153, 20, 0.5);
  background: rgba(248, 232, 197, 0.97);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.3;
  text-align: center;
}

@keyframes cch-sheen {
  to {
    transform: translateX(130%);
  }
}

/* Smaller screens */

@media (max-width: 800px) {
  .cch-reader-toolbar {
    grid-template-columns: repeat(4, auto);
    justify-content: center;
  }

  .cch-reader-position {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .cch-reader-control {
    padding: 7px 10px;
    font-size: 0.94rem;
  }

  .cch-spread-stage {
    width: min(100%, calc((100svh - 205px) * 16 / 9));
    max-height: calc(100svh - 205px);
  }
}

@media (max-width: 700px) {
  .cch-screen {
    padding: 6px 10px 20px;
  }

  .cch-house-placeholder,
  .cch-family-placeholder {
    width: min(94vw, 1000px);
    border-radius: 14px;
  }

  .cch-house-overlay {
    margin-top: 6px;
  }

  .cch-bookshelf {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }

  .cch-book {
    min-height: 170px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cch-reader *,
  .cch-reader *::before,
  .cch-reader *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}


/* v2.1.0: language artwork, image-mask flaps, fixed hotspot sheen, and stable media */
.cch-mirror {
  min-width: 0;
  min-height: 0;
  contain: layout paint size;
  isolation: isolate;
}

.cch-mirror video,
.cch-mirror img {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  border-radius: inherit;
}

.cch-flap.shape-image .cch-flap__reveal,
.cch-flap.shape-image .cch-flap__front,
.cch-flap.shape-image .cch-flap__inside {
  -webkit-mask-position: center;
  mask-position: center;
}


/* v2.1.1: preserve the separately uploaded inside flap face in Safari */
.cch-flap__card{overflow:visible;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.cch-flap__front,.cch-flap__inside{-webkit-backface-visibility:hidden!important;backface-visibility:hidden!important;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.cch-flap__front{-webkit-transform:translateZ(.2px);transform:translateZ(.2px)}
.cch-flap__inside{-webkit-transform:var(--inside-transform,rotateX(180deg)) translateZ(.2px)!important;transform:var(--inside-transform,rotateX(180deg)) translateZ(.2px)!important}


/* v2.1.2: spread-crop fronts, reveal below mirrors, and strict clipping at spread edges */
.cch-spread-stage{overflow:hidden!important;-webkit-clip-path:inset(0);clip-path:inset(0);contain:paint;isolation:isolate}
.cch-flap-reveal{z-index:6;display:block;overflow:hidden;opacity:0;pointer-events:none;background-position:center;background-repeat:no-repeat;background-size:100% 100%;transition:opacity .12s linear}
.cch-flap-reveal.is-visible{opacity:1}
.cch-mirror{z-index:8}
.cch-flap{z-index:10}
.cch-flap__front,.cch-flap__inside{overflow:hidden}
.cch-flap__spread-crop{position:absolute;display:block;max-width:none!important;max-height:none!important;object-fit:fill;pointer-events:none;user-select:none}
@media(prefers-reduced-motion:reduce){.cch-flap-reveal{transition:none}}


/* v2.1.3: spread, reveal, and inside-flap hotspots */
.cch-hotspot{z-index:30}
.cch-hotspot--reveal[hidden]{display:none!important}
.cch-hotspot--inside{position:absolute;display:block;z-index:6;overflow:hidden;contain:paint;border:2px dashed rgba(90,116,2,.52);border-radius:10px;background:rgba(90,116,2,.06);cursor:pointer;padding:0}
.cch-hotspot--inside.has-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.72) 50%,transparent 80%);transform:translateX(-130%);animation:cch-sheen 1.1s .35s 1 forwards;pointer-events:none}
.cch-flap:not(.is-open) .cch-hotspot--inside{visibility:hidden;pointer-events:none}
.cch-flap.is-open .cch-hotspot--inside{visibility:visible;pointer-events:auto}


/* v2.1.4: flap-open audio triggers, no shimmer, alpha-aware shadows, and open-flap stacking */
.cch-hotspot::after,.cch-hotspot--inside::after{content:none!important;display:none!important;animation:none!important}
.cch-flap__card,.cch-flap.is-open .cch-flap__card{filter:none!important;box-shadow:none!important}
.cch-flap__front,.cch-flap__inside{filter:drop-shadow(0 2px 2px rgba(61,52,45,.24));transition:filter var(--speed,.7s) ease}
.cch-flap.is-open .cch-flap__front,.cch-flap.is-open .cch-flap__inside{filter:drop-shadow(0 12px 9px rgba(61,52,45,.34))}
.cch-flap.is-open{z-index:20!important}

/* v2.1.5: visible-shape shadows, inside-flap text, localized camera choice, and scaled typography */
.cch-flap__front,
.cch-flap__inside{
  filter:none!important;
  box-shadow:none!important;
}
.cch-flap__shadow{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  overflow:visible;
  pointer-events:none;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform-origin:var(--origin,top center);
  transition:transform var(--speed,.7s) cubic-bezier(.22,.72,.2,1);
  will-change:transform;
}
.cch-flap.is-open .cch-flap__shadow{transform:var(--open-transform,rotateX(155deg) translateZ(2px))}
.cch-flap__shadow-shape{
  position:absolute;
  inset:0;
  display:block;
  background:rgba(54,42,35,.42);
  opacity:.72;
  filter:drop-shadow(0 3px 3px rgba(54,42,35,.30));
  transition:filter var(--speed,.7s) ease,opacity var(--speed,.7s) ease;
}
.cch-flap.is-open .cch-flap__shadow-shape{
  opacity:.88;
  filter:drop-shadow(0 12px 9px rgba(54,42,35,.46));
}
.cch-flap[data-bring-front="true"].is-open{z-index:20!important}
.cch-flap[data-bring-front="false"].is-open{z-index:10!important}
.cch-flap__inside-art{
  position:absolute;
  inset:0;
  display:block;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  transform-origin:center center;
  pointer-events:none;
}
.cch-text--inside{z-index:5;pointer-events:none}
.cch-flap:not(.is-open) .cch-text--inside{visibility:hidden}
.cch-flap.is-open .cch-text--inside{visibility:visible}
.cch-mirror{
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 42% 35%,#e9f2f5,#b8ccd5 72%);
}
.cch-mirror video,
.cch-mirror img{z-index:1}
.cch-mirror video{transform:scaleX(-1)}
.cch-mirror img{transform:none!important}
.cch-mirror__prompt{
  position:absolute;
  left:8%;
  right:8%;
  bottom:9%;
  z-index:2;
  display:block;
  padding:.42em .58em;
  border-radius:999px;
  background:rgba(248,232,197,.94);
  color:var(--cch-ink);
  font:700 clamp(10px,1.55vw,18px)/1.12 Garamond,Georgia,serif;
  text-align:center;
  white-space:normal;
  box-shadow:0 2px 6px rgba(54,42,35,.28);
  pointer-events:none;
}
.cch-camera-choice{
  position:absolute;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(61,52,45,.62);
}
.cch-camera-choice__card{
  width:min(560px,94vw);
  padding:24px;
  border:3px solid var(--cch-gold);
  border-radius:20px;
  background:var(--cch-paper);
  box-shadow:0 18px 48px rgba(36,29,25,.38);
  text-align:center;
}
.cch-camera-choice__card h2{margin:0 0 10px;color:var(--cch-burgundy);font-size:clamp(1.8rem,4vw,2.8rem)}
.cch-camera-choice__card p{margin:0 auto 18px;max-width:440px;font-size:clamp(1rem,2.4vw,1.25rem)}
.cch-camera-choice__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.cch-camera-choice__actions button{min-height:52px;padding:12px 18px;border-radius:14px;font-size:1rem;font-weight:700}
@media(max-width:600px){.cch-camera-choice__actions{display:grid}.cch-camera-choice__actions button{width:100%}}
@media(prefers-reduced-motion:reduce){.cch-flap__shadow,.cch-flap__shadow-shape{transition:none}}


/* v2.1.6: front-only alpha shadow, reveal text, three camera modes, and click-through mirrors */
.cch-flap__shadow{display:none!important}
.cch-flap__front-shadow{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 2px 2px rgba(54,42,35,var(--front-shadow-opacity,.42)));pointer-events:none}
.cch-flap__front{position:absolute;inset:0}
.cch-flap__inside{filter:none!important;box-shadow:none!important}
.cch-flap.is-open{pointer-events:none}
.cch-flap.is-open .cch-flap__card{pointer-events:auto}
.cch-flap.is-open .cch-hotspot--inside{pointer-events:auto}
.cch-text--reveal{z-index:7;pointer-events:none}
.cch-text--reveal[hidden]{display:none!important}
.cch-mirror[data-camera-mode="fallback"] .cch-mirror__prompt{display:none!important}
.cch-mirror[data-camera-mode="off"]{background:rgba(248,232,197,.82)}
.cch-camera-mode-select{min-height:42px;padding:7px 10px;border:2px solid var(--cch-gold);border-radius:10px;background:var(--cch-paper);color:var(--cch-ink);font:700 1rem Garamond,Georgia,serif}
.cch-camera-choice__select-label{display:grid;gap:8px;margin:14px auto 18px;max-width:420px;font-weight:700;text-align:left}
.cch-camera-choice__select-label select{width:100%;min-height:50px;padding:10px;border:2px solid var(--cch-gold);border-radius:12px;background:#fffaf0;font:700 1rem Garamond,Georgia,serif}

/* v2.1.7: physical inside silhouettes, stable custom hinge direction, reachable close controls, separate language text layouts, and pending mirror labels */
.cch-object{margin:0!important;-webkit-appearance:none;appearance:none}
.cch-flap__card,
.cch-flap__inside,
.cch-flap__inside-shape,
.cch-flap__inside-content{transform-box:border-box;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.cch-flap__inside{overflow:visible!important}
.cch-flap__inside-shape,
.cch-flap__inside-content,
.cch-flap__inside-art{position:absolute;inset:0;display:block;transform-origin:center center}
.cch-flap__inside-shape{transform:var(--inside-reflection,scaleY(-1));overflow:visible}
.cch-flap__inside-content{transform:var(--inside-reflection,scaleY(-1));overflow:visible}
.cch-flap__inside-art{background-position:center;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.cch-flap__front-shadow{filter:drop-shadow(0 2px 1px rgba(54,42,35,var(--front-shadow-opacity,.46))) drop-shadow(0 0 1px rgba(54,42,35,var(--front-shadow-opacity,.46)));opacity:1;transition:filter var(--speed,.7s) ease,opacity .25s ease}
.cch-flap.is-open .cch-flap__front-shadow{filter:none!important;opacity:0}
.cch-flap.is-open{pointer-events:none!important}
.cch-flap.is-open .cch-flap__card{pointer-events:none!important}
.cch-flap.is-open .cch-hotspot--inside{pointer-events:auto!important}
.cch-flap-close{position:absolute;z-index:70;display:grid;place-items:center;width:46px;height:46px;min-width:46px;min-height:46px;margin:0!important;padding:0!important;border:3px solid var(--cch-paper);border-radius:999px;background:var(--cch-burgundy);color:#fff;font:900 25px/1 Arial,sans-serif;box-shadow:0 3px 11px rgba(54,42,35,.35);transform:translate(-50%,-50%);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cch-flap-close[hidden]{display:none!important}
.cch-flap-close:focus-visible{outline:4px solid var(--cch-gold);outline-offset:2px}
.cch-mirror__pending-label{position:absolute;inset:15%;z-index:2;display:grid;place-items:center;padding:.35em;border-radius:999px;background:rgba(248,232,197,.94);color:var(--cch-ink);font:700 clamp(12px,2vw,22px)/1.1 Garamond,Georgia,serif;text-align:center;white-space:normal;box-shadow:0 2px 6px rgba(54,42,35,.22);pointer-events:none}
@media(max-width:600px){.cch-flap-close{width:42px;height:42px;min-width:42px;min-height:42px;font-size:22px}}


/* v2.1.8: preserve asymmetric flap silhouettes, restore closed-front edge shadows,
   and scale close controls to the flap instead of covering small printed text. */
.cch-flap__inside-shape{
  transform:none!important;
  -webkit-transform:none!important;
  overflow:visible!important;
}
.cch-flap__inside-content{
  transform:var(--inside-reflection,scaleY(-1))!important;
  -webkit-transform:var(--inside-reflection,scaleY(-1))!important;
  overflow:visible!important;
}
.cch-flap__card{
  -webkit-transform-origin:var(--origin,top center);
  transform-origin:var(--origin,top center);
}
.cch-flap__front-shadow{
  filter:
    drop-shadow(1px 0 0 rgba(54,42,35,var(--front-outline-opacity,.38)))
    drop-shadow(-1px 0 0 rgba(54,42,35,var(--front-outline-opacity,.38)))
    drop-shadow(0 1px 0 rgba(54,42,35,var(--front-outline-opacity,.38)))
    drop-shadow(0 -1px 0 rgba(54,42,35,var(--front-outline-opacity,.38)))
    drop-shadow(0 2px 2px rgba(54,42,35,var(--front-shadow-opacity,.28)))!important;
  opacity:1;
}
.cch-flap.is-open .cch-flap__front-shadow{
  filter:none!important;
  opacity:0;
}
.cch-flap-close{
  width:var(--close-size,36px)!important;
  height:var(--close-size,36px)!important;
  min-width:var(--close-size,36px)!important;
  min-height:var(--close-size,36px)!important;
  border-width:2px!important;
  font-size:var(--close-font-size,20px)!important;
  line-height:1!important;
}
@media(max-width:600px){
  .cch-flap-close{
    width:var(--close-size,34px)!important;
    height:var(--close-size,34px)!important;
    min-width:var(--close-size,34px)!important;
    min-height:var(--close-size,34px)!important;
    font-size:var(--close-font-size,19px)!important;
  }
}


/* v2.1.10: keep live inside-flap text/hotspots readable without changing flap art,
   restore adjustable alpha-edge shadows, and apply requested close/mirror styles. */
.cch-flap__inside-live-layer{
  position:absolute;
  inset:0;
  display:block;
  transform:var(--inside-reflection,scaleY(-1));
  -webkit-transform:var(--inside-reflection,scaleY(-1));
  transform-origin:center center;
  -webkit-transform-origin:center center;
  overflow:visible;
  pointer-events:none;
}
.cch-flap__inside-live-layer .cch-text--inside{pointer-events:none}
.cch-flap__inside-live-layer .cch-hotspot--inside{pointer-events:auto!important}

.cch-flap__front-shadow{
  overflow:visible!important;
  -webkit-backface-visibility:visible!important;
  backface-visibility:visible!important;
  isolation:isolate;
  will-change:filter,opacity;
  transform:translateZ(.1px);
  -webkit-transform:translateZ(.1px);
  filter:
    drop-shadow(1px 0 0 rgba(54,42,35,var(--front-outline-opacity,.42)))
    drop-shadow(-1px 0 0 rgba(54,42,35,var(--front-outline-opacity,.42)))
    drop-shadow(0 1px 0 rgba(54,42,35,var(--front-outline-opacity,.42)))
    drop-shadow(0 -1px 0 rgba(54,42,35,var(--front-outline-opacity,.42)))
    drop-shadow(0 3px 3px rgba(54,42,35,var(--front-shadow-opacity,.34)))!important;
}
.cch-flap:not(.is-open) .cch-flap__front-shadow{opacity:1!important}
.cch-flap.is-open .cch-flap__front-shadow{filter:none!important;opacity:0!important}

.cch-flap-close{
  background:var(--cch-blue)!important;
  color:#fff!important;
}
.cch-mirror__pending-label{
  font-family:"cafeteria",sans-serif!important;
  font-size:15px!important;
  font-weight:700!important;
  font-style:normal!important;
  line-height:1.1!important;
}


/* v2.1.11: Safari-safe front alpha shadows use a non-3D shadow source.
   The actual front and inside faces keep their existing transforms. */
.cch-flap__card{overflow:visible!important}
.cch-flap__front-shadow{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  overflow:visible!important;
  pointer-events:none;
  isolation:isolate;
  transform:none!important;
  -webkit-transform:none!important;
  filter:
    drop-shadow(1px 0 0 rgba(54,42,35,var(--front-outline-opacity,.42)))
    drop-shadow(-1px 0 0 rgba(54,42,35,var(--front-outline-opacity,.42)))
    drop-shadow(0 1px 0 rgba(54,42,35,var(--front-outline-opacity,.42)))
    drop-shadow(0 -1px 0 rgba(54,42,35,var(--front-outline-opacity,.42)))
    drop-shadow(0 3px 3px rgba(54,42,35,var(--front-shadow-opacity,.34)))!important;
}
.cch-flap__front-shadow-source{
  position:absolute;
  inset:0;
  display:block;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  overflow:hidden;
}
.cch-flap__front{z-index:2}
.cch-flap:not(.is-open) .cch-flap__front-shadow{opacity:1!important}
.cch-flap.is-open .cch-flap__front-shadow{filter:none!important;opacity:0!important}

.cch-reader button,
.cch-reader [role="button"],
.cch-reader .cch-object {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 700px) {
  .cch-bookshelf {
    width: min(100%, calc((100svh - 135px) * 16 / 9));
    border-radius: 10px;
  }
  .cch-library-cover__badge { padding: 3px 5px; }
}


/* v2.1.15: the reader selects the localized English/Spanish cover path in JavaScript. */


/* v2.1.16: parent gear settings and refined illustrated-library finish */
.cch-library{position:relative}
.cch-library .cch-language-switcher{display:none!important}
.cch-parent-settings-button{
  position:absolute;
  top:max(10px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  z-index:30;
  display:grid;
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  padding:0;
  place-items:center;
  border:2px solid rgba(112,43,63,.32);
  border-radius:50%;
  background:rgba(248,232,197,.94);
  color:var(--cch-burgundy);
  box-shadow:0 3px 8px rgba(61,52,45,.2);
  font:700 1.55rem/1 system-ui,sans-serif;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.cch-parent-settings-button:focus-visible{outline:4px solid var(--cch-gold);outline-offset:3px}
.cch-parent-settings{
  position:absolute;
  top:64px;
  right:max(12px,env(safe-area-inset-right));
  z-index:31;
  display:grid;
  width:min(330px,calc(100vw - 24px));
  gap:12px;
  padding:18px;
  border:2px solid var(--cch-gold);
  border-radius:16px;
  background:rgba(249,236,218,.98);
  color:var(--cch-ink);
  box-shadow:0 16px 38px rgba(45,29,20,.32);
  text-align:left;
}
.cch-parent-settings[hidden]{display:none!important}
.cch-parent-settings h3{margin:0;color:var(--cch-burgundy);font-size:1.3rem}
.cch-parent-settings label{display:grid;gap:6px;margin:0;font-weight:700}
.cch-parent-settings__select{
  width:100%;
  min-height:48px;
  padding:9px 11px;
  border:2px solid var(--cch-gold);
  border-radius:11px;
  background:#fffaf0;
  color:var(--cch-ink);
  font:700 1rem Garamond,Georgia,serif;
}
.cch-parent-settings__close{
  min-height:44px;
  padding:9px 14px;
  border:0;
  border-radius:11px;
  background:var(--cch-blue);
  color:white;
  font:700 1rem Garamond,Georgia,serif;
}
.cch-library-cover{
  border-radius:0!important;
  background:transparent!important;
  box-shadow:0 8px 5px -3px rgba(35,22,15,.78),3px 4px 3px -2px rgba(35,22,15,.56)!important;
  overflow:visible!important;
}
.cch-library-cover__image,
.cch-library-cover__placeholder{
  width:100%;
  height:100%;
  border-radius:0 9px 9px 0!important;
  overflow:hidden;
}
.cch-library-cover__image{
  object-fit:cover!important;
  object-position:center!important;
}
.cch-library-cover--locked,
.cch-library-cover--coming-soon{filter:none!important;opacity:1!important}
.cch-library-cover__badge{display:none!important}
.cch-library-cover__lock{
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  display:grid;
  width:clamp(30px,4.2vw,52px);
  height:clamp(34px,4.8vw,58px);
  padding:8px;
  place-items:center;
  border-radius:999px;
  background:rgba(61,52,45,.84);
  color:white;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.cch-library-cover__lock svg{display:block;width:100%;height:100%}
.cch-library-cover__status{
  position:absolute;
  top:calc(100% + 4px);
  left:50%;
  z-index:5;
  width:max-content;
  max-width:150%;
  padding:0;
  background:transparent;
  color:var(--cch-ink);
  font:700 clamp(.68rem,1.1vw,.95rem) Garamond,Georgia,serif;
  line-height:1.05;
  text-shadow:0 1px 0 var(--cch-cream),1px 0 0 var(--cch-cream),-1px 0 0 var(--cch-cream),0 -1px 0 var(--cch-cream);
  transform:translateX(-50%);
  pointer-events:none;
}
.cch-audio-is-off [data-cch-play-narration]{opacity:.52}
@media(max-width:700px){
  .cch-parent-settings-button{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:44px;height:44px;min-width:44px;min-height:44px}
  .cch-parent-settings{top:58px;right:8px}
  .cch-library__header{padding-right:48px}
}

/* Camera choices live in the parent gear; keep the old in-book stop control out of toddler reach. */
[data-cch-stop-camera]{display:none!important}


/* v2.1.18 — final illustrated-library presentation.
   Cover artwork keeps its intrinsic proportions. Only the two right corners
   are rounded; no cover is cropped, stretched, faded, or recolored. */
.cch-library__header{
  position:relative!important;
  width:100%!important;
  margin:0 0 8px!important;
  padding:0 56px!important;
  text-align:center!important;
}
.cch-library .cch-screen__title{
  width:100%!important;
  margin:0 auto 5px!important;
  color:#171310!important;
  text-align:center!important;
  font-family:"cafeteria",sans-serif!important;
  font-weight:700!important;
}

/* The gear is created by cch-reader.js on the live Shopify library. */
.cch-parent-settings-button{
  display:grid!important;
  position:absolute!important;
  top:max(10px,env(safe-area-inset-top))!important;
  right:max(12px,env(safe-area-inset-right))!important;
  z-index:100!important;
  visibility:visible!important;
  opacity:1!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  padding:10px!important;
  place-items:center!important;
  border:2px solid rgba(112,43,63,.32)!important;
  border-radius:50%!important;
  background:rgba(248,232,197,.96)!important;
  color:var(--cch-burgundy)!important;
  box-shadow:0 3px 8px rgba(61,52,45,.22)!important;
}
.cch-parent-settings-button svg{display:block!important;width:100%!important;height:100%!important}

/* Natural cover dimensions: width comes from the saved shelf placement;
   height comes only from the actual image. */
.cch-library-cover{
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.cch-library-cover--has-image{
  display:block!important;
  height:auto!important;
  aspect-ratio:auto!important;
  line-height:0!important;
}
.cch-library-cover--has-image .cch-library-cover__image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0 7px 7px 0!important;
  filter:drop-shadow(0 7px 4px rgba(32,20,13,.72))!important;
  pointer-events:none!important;
}
.cch-library-cover__placeholder{
  width:100%!important;
  height:100%!important;
  border-radius:0 7px 7px 0!important;
  filter:drop-shadow(0 7px 4px rgba(32,20,13,.72))!important;
}
.cch-library-cover--locked,
.cch-library-cover--coming-soon{
  filter:none!important;
  opacity:1!important;
}
.cch-library-cover__badge{display:none!important}

/* Restore the warm lock treatment: cream lock, then a comfortably spaced
   cream status line beneath it, both centered on the cover. */
.cch-library-cover__lock{
  position:absolute!important;
  left:50%!important;
  top:40%!important;
  z-index:5!important;
  display:block!important;
  width:clamp(32px,4.2vw,52px)!important;
  height:clamp(36px,4.7vw,58px)!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--cch-cream)!important;
  filter:drop-shadow(0 2px 2px rgba(38,24,16,.88))!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
}
.cch-library-cover__lock svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
}
.cch-library-cover__status{
  position:absolute!important;
  left:50%!important;
  top:63%!important;
  z-index:5!important;
  width:max-content!important;
  max-width:94%!important;
  padding:0!important;
  background:transparent!important;
  color:var(--cch-cream)!important;
  font-family:"cafeteria",sans-serif!important;
  font-size:clamp(.68rem,1.05vw,.96rem)!important;
  font-weight:700!important;
  line-height:1.12!important;
  letter-spacing:.01em!important;
  text-align:center!important;
  white-space:nowrap!important;
  text-shadow:0 2px 2px rgba(38,24,16,.92),0 0 2px rgba(38,24,16,.72)!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:none!important;
}

@media(max-width:700px){
  .cch-library__header{padding:0 48px!important}
  .cch-parent-settings-button{
    top:max(8px,env(safe-area-inset-top))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
  }
  .cch-library-cover__lock{top:39%!important}
  .cch-library-cover__status{top:64%!important}
}


/* v2.1.19 — toddler reader navigation, hidden page-information drawer,
   customer access dialog, and page-only Dawn chrome removal. */
html.cch-reader-page .shopify-section-group-header-group,
html.cch-reader-page .shopify-section-group-footer-group {
  display: none !important;
}
html.cch-reader-page,
html.cch-reader-page body {
  min-height: 100%;
}
html.cch-reader-page #MainContent {
  margin: 0 !important;
  padding: 0 !important;
}

.cch-book-reader__shell {
  position: relative;
}
.cch-reader-toolbar--toddler {
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  z-index: 80 !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}
.cch-reader-library-button,
.cch-reader-arrow {
  display: grid !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  padding: 13px !important;
  place-items: center !important;
  border: 2px solid rgba(112,43,63,.3) !important;
  border-radius: 18px !important;
  background: rgba(248,232,197,.96) !important;
  color: var(--cch-burgundy) !important;
  box-shadow: 0 4px 12px rgba(61,52,45,.24) !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}
.cch-reader-library-button {
  position: absolute !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  left: max(12px, env(safe-area-inset-left)) !important;
}
.cch-reader-library-button svg,
.cch-reader-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cch-reader-arrow-group {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.cch-reader-arrow:disabled {
  opacity: .34 !important;
  box-shadow: none !important;
}
.cch-reader-library-button:focus-visible,
.cch-reader-arrow:focus-visible {
  outline: 4px solid var(--cch-blue) !important;
  outline-offset: 3px !important;
}

.cch-spread-frame {
  padding: 4px !important;
}
.cch-spread-stage {
  width: min(100%, calc((100svh - 16px) * 16 / 9), 1440px) !important;
  max-height: calc(100svh - 16px) !important;
}

.cch-page-info-sheet {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 75;
  width: min(92vw, 620px);
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  visibility: hidden;
  transition: transform 220ms ease, opacity 180ms ease, visibility 0s linear 220ms;
  pointer-events: none;
}
.cch-page-info-sheet.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
}
.cch-page-info-sheet__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 58px 12px 18px;
  border: 2px solid rgba(112,43,63,.28);
  border-radius: 22px;
  background: rgba(248,232,197,.97);
  box-shadow: 0 10px 28px rgba(61,52,45,.28);
}
.cch-page-info-sheet__position {
  display: block !important;
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  color: var(--cch-burgundy) !important;
  font-size: clamp(1rem, 2.2vw, 1.3rem) !important;
  text-align: center;
  white-space: normal !important;
}
.cch-page-info-sheet__narration {
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
}
.cch-page-info-sheet__close {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 9px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cch-burgundy);
  transform: translateY(-50%);
}
.cch-page-info-sheet__close svg { width: 100%; height: 100%; }

.cch-parent-settings__account {
  display: grid;
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid rgba(112,43,63,.18);
  color: var(--cch-ink);
  font-weight: 700;
}
.cch-parent-settings__account-link {
  color: var(--cch-burgundy);
  text-decoration: underline;
}

.cch-locked-book-panel[hidden] { display: none !important; }
.cch-locked-book-panel {
  position: absolute;
  inset: 0;
  z-index: 140;
  display: grid;
  padding: 18px;
  place-items: center;
  background: rgba(36,26,20,.48);
  opacity: 0;
  transition: opacity 180ms ease;
}
.cch-locked-book-panel.is-open { opacity: 1; }
.cch-locked-book-panel__card {
  width: min(92vw, 470px);
  padding: 24px;
  border: 2px solid rgba(112,43,63,.28);
  border-radius: 24px;
  background: var(--cch-paper);
  box-shadow: 0 18px 46px rgba(25,17,12,.35);
  text-align: center;
}
.cch-locked-book-panel__card h3 {
  margin: 0 0 10px;
  color: var(--cch-burgundy);
  font-family: "cafeteria", sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}
.cch-locked-book-panel__card p {
  margin: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.4;
}
.cch-locked-book-panel__actions {
  display: grid;
  gap: 10px;
}
.cch-locked-book-panel__action,
.cch-locked-book-panel__close {
  display: grid;
  width: 100%;
  min-height: 54px;
  place-items: center;
  text-decoration: none;
}
.cch-library-cover[data-cch-locked-book] { cursor: pointer; }

@media (max-width: 700px) {
  .cch-reader-library-button,
  .cch-reader-arrow {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }
  .cch-reader-arrow-group { gap: 6px; }
  .cch-page-info-sheet { width: min(94vw, 620px); }
}

@media (prefers-reduced-motion: reduce) {
  .cch-page-info-sheet,
  .cch-locked-book-panel { transition: none !important; }
}


/* v2.1.20 — always-available toddler narration control.
   It disappears completely when parent audio is off or the current spread has no narration. */
.cch-reader-narration-button[hidden] {
  display: none !important;
}
.cch-reader-narration-button {
  position: absolute !important;
  left: 50% !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  z-index: 82 !important;
  display: grid !important;
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  padding: 13px !important;
  place-items: center !important;
  border: 2px solid rgba(112,43,63,.30) !important;
  border-radius: 50% !important;
  background: rgba(248,232,197,.97) !important;
  color: var(--cch-burgundy) !important;
  box-shadow: 0 5px 14px rgba(61,52,45,.25) !important;
  transform: translateX(-50%) !important;
  -webkit-tap-highlight-color: transparent;
}
.cch-reader-narration-button:focus-visible {
  outline: 4px solid var(--cch-blue) !important;
  outline-offset: 3px !important;
}
.cch-narration-icon,
.cch-narration-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cch-narration-icon--pause { display: none; }
.cch-reader-narration-button.is-playing .cch-narration-icon--play { display: none; }
.cch-reader-narration-button.is-playing .cch-narration-icon--pause { display: block; }
.cch-audio-is-off .cch-reader-narration-button,
.cch-narration-unavailable .cch-reader-narration-button {
  display: none !important;
}
.cch-page-info-sheet {
  bottom: max(98px, calc(env(safe-area-inset-bottom) + 88px));
}
.cch-audio-is-off .cch-page-info-sheet,
.cch-narration-unavailable .cch-page-info-sheet {
  bottom: max(12px, env(safe-area-inset-bottom));
}
@media (max-width: 700px) {
  .cch-reader-narration-button {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    padding: 12px !important;
  }
  .cch-page-info-sheet {
    bottom: max(88px, calc(env(safe-area-inset-bottom) + 78px));
  }
}

/* v2.1.21 — spread-corner toddler controls, slate-blue icon system,
   visually hidden captions, eager reveal painting, and Safari back-face protection. */

/* The original toolbar remains in the markup for compatibility, but the icon
   controls now live directly over the spread. */
.cch-reader-toolbar--toddler {
  display: none !important;
}

.cch-spread-control-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: block;
  pointer-events: none;
}

.cch-spread-control-overlay .cch-reader-library-button,
.cch-spread-control-overlay .cch-reader-arrow,
.cch-spread-control-overlay .cch-reader-narration-button {
  border-color: rgba(60, 105, 131, .42) !important;
  background: rgba(248, 232, 197, .97) !important;
  color: var(--cch-blue, #3c6983) !important;
  box-shadow: 0 4px 12px rgba(61, 52, 45, .24) !important;
  pointer-events: auto !important;
}

.cch-spread-control-overlay .cch-reader-library-button {
  top: auto !important;
  right: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  left: max(12px, env(safe-area-inset-left)) !important;
}

.cch-spread-control-overlay .cch-reader-arrow-group {
  top: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  left: auto !important;
}

.cch-spread-control-overlay .cch-reader-narration-button {
  top: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
}

.cch-reader-library-button:focus-visible,
.cch-reader-arrow:focus-visible,
.cch-reader-narration-button:focus-visible,
.cch-parent-settings-button:focus-visible,
.cch-flap-close:focus-visible,
.cch-page-info-sheet__close:focus-visible {
  outline: 4px solid var(--cch-blue, #3c6983) !important;
  outline-offset: 3px !important;
}

/* Match the other icon controls without changing text/action buttons. */
.cch-parent-settings-button,
.cch-flap-close,
.cch-page-info-sheet__close {
  border-color: rgba(60, 105, 131, .42) !important;
  background: rgba(248, 232, 197, .97) !important;
  color: var(--cch-blue, #3c6983) !important;
}

/* Keep the caption content available to screen readers, but remove the repeated
   visible strip. Add data-cch-show-captions="true" to the reader root later to
   restore the visible caption area. */
.cch-reader:not([data-cch-show-captions="true"]) .cch-caption {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Use a real eager image for under-flap art so Safari paints it before the
   opening animation rather than waiting until the flap begins to close. */
.cch-flap-reveal__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

/* Safari can occasionally paint an uploaded inside face through the closed
   front face. Keep it completely unpainted until the flap has started opening. */
.cch-flap__inside {
  visibility: hidden !important;
  opacity: 0 !important;
}
.cch-flap.is-inside-visible .cch-flap__inside {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Keep the double-tap information sheet above the new bottom controls. */
.cch-page-info-sheet {
  z-index: 120 !important;
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px)) !important;
}

@media (max-width: 700px) {
  .cch-spread-control-overlay .cch-reader-library-button,
  .cch-spread-control-overlay .cch-reader-arrow {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 11px !important;
  }
  .cch-spread-control-overlay .cch-reader-narration-button {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    padding: 11px !important;
  }
}


/* v2.1.23: keep reveal pixels warm without promoting the reveal into a
   separate 3-D layer. The near-transparent closed state makes Safari decode
   and paint the artwork early, while .is-visible still controls the actual
   reveal when the flap opens. */
.cch-flap-reveal {
  visibility: visible !important;
  opacity: .001 !important;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  will-change: auto !important;
}
.cch-flap-reveal.is-visible {
  opacity: 1 !important;
}

/* v2.1.24 — match the Covenant Child House heading to the library heading.
   Font size is intentionally inherited from the existing house-title rule. */
.cch-house .cch-screen__title,
.cch-house-overlay .cch-screen__title {
  color: #171310 !important;
  font-family: "cafeteria", sans-serif !important;
  font-weight: 700 !important;
}


/* v2.1.30 — deterministic reveal-only behavior for the one teaching-page
   flap whose under-flap artwork is Jesus. The class is assigned only when
   the flap uses images/reveals/flap-04-02-reveal.webp. While open, remove the
   entire rotating card from paint so neither its front nor inside face can
   cover the reveal. Every other flap keeps the existing 3-D behavior. */
.cch-flap.cch-flap--reveal-only.is-open .cch-flap__card {
  display: none !important;
}
.cch-flap.cch-flap--reveal-only.is-open .cch-flap__inside,
.cch-flap.cch-flap--reveal-only.is-open .cch-flap__front,
.cch-flap.cch-flap--reveal-only.is-open .cch-flap__front-shadow {
  display: none !important;
}


/* v2.1.32 — child-tested reader behavior.
   Controls are a separate row below the artwork; only five large/specific
   flaps retain close arrows; all other open flaps are full-size close targets;
   and a parchment cover prevents under-flap surprises from flashing while the
   closed flap artwork is still decoding. */
.cch-book-reader__shell {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 0 !important;
}
.cch-spread-frame {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 4px 4px 0 !important;
}
.cch-spread-stage {
  width: min(100%, calc((100svh - 84px) * 16 / 9), 1440px) !important;
  max-height: calc(100svh - 84px) !important;
}
.cch-reader-controls-below {
  position: relative !important;
  z-index: 90 !important;
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  width: min(100%, calc((100svh - 84px) * 16 / 9), 1440px) !important;
  min-height: 76px !important;
  margin: 0 auto !important;
  padding: 5px max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  background: var(--cch-paper) !important;
  pointer-events: auto !important;
}
.cch-reader-controls-below .cch-reader-library-button,
.cch-reader-controls-below .cch-reader-arrow,
.cch-reader-controls-below .cch-reader-narration-button {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  border-color: rgba(60, 105, 131, .42) !important;
  background: rgba(248, 232, 197, .97) !important;
  color: var(--cch-blue, #3c6983) !important;
  box-shadow: 0 4px 12px rgba(61, 52, 45, .24) !important;
  pointer-events: auto !important;
}
.cch-reader-controls-below .cch-reader-library-button {
  grid-column: 1 !important;
  justify-self: start !important;
}
.cch-reader-controls-below .cch-reader-narration-button {
  grid-column: 2 !important;
  justify-self: center !important;
}
.cch-reader-controls-below .cch-reader-arrow-group {
  position: static !important;
  inset: auto !important;
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
  gap: 8px !important;
  pointer-events: auto !important;
}
.cch-reader-controls-below .cch-reader-library-button,
.cch-reader-controls-below .cch-reader-arrow {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  padding: 12px !important;
  border-radius: 16px !important;
}
.cch-reader-controls-below .cch-reader-narration-button {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  padding: 12px !important;
}
.cch-spread-loading-cover {
  position: absolute !important;
  inset: 0 !important;
  z-index: 250 !important;
  display: block !important;
  background: var(--cch-paper) !important;
  opacity: 1 !important;
  transition: opacity 120ms ease !important;
  pointer-events: auto !important;
}
.cch-spread-loading-cover.is-ready {
  opacity: 0 !important;
}
.cch-flap.is-open.cch-flap--tap-to-close {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.cch-flap.is-open.cch-flap--tap-to-close .cch-flap__card {
  pointer-events: auto !important;
}
.cch-flap.is-open.cch-flap--tap-to-close .cch-hotspot--inside {
  pointer-events: auto !important;
}
@media (max-width: 700px) {
    .cch-spread-stage {
    width: min(100%, calc((100svh - 76px) * 16 / 9), 1440px) !important;
    max-height: calc(100svh - 76px) !important;
  }
  .cch-reader-controls-below {
    width: min(100%, calc((100svh - 76px) * 16 / 9), 1440px) !important;
    min-height: 68px !important;
    gap: 6px !important;
  }
  .cch-reader-controls-below .cch-reader-library-button,
  .cch-reader-controls-below .cch-reader-arrow {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 10px !important;
  }
  .cch-reader-controls-below .cch-reader-narration-button {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 10px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cch-spread-loading-cover { transition: none !important; }
}


/* v2.1.33 — arrow-free child-tested flaps and faster interaction.
   Every open flap closes from its full original touch area; no close-arrow
   control is shown or needed. */
.cch-flap-close {
  display: none !important;
}
/* iPhone reader: use the full available height now that controls overlay the book */
.cch-spread-stage.cch-iphone-spread {
  width: min(
    calc(
      (100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 8px)
      * 16 / 9
    ),
    calc(
      100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 8px
    )
  ) !important;

  max-height: none !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}
.cch-spread-frame.cch-iphone-spread-frame {
  position: relative !important;
}
/* iPhone reader: center-gutter page arrows */
.cch-iphone-spread-frame
.cch-spread-control-overlay
.cch-reader-arrow-group {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  display: flex !important;
  gap: 8px !important;

  transform: translate(-50%, -50%) !important;
}

.cch-iphone-spread-frame
.cch-spread-control-overlay
.cch-reader-arrow {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 10px !important;

  border-color: rgba(60, 105, 131, .75) !important;
  background: rgba(248, 232, 197, .65) !important;
  color: #3c6983 !important;
}
/* iPhone reader: keep the spread anchored near the top */
/* iPhone reader: pin the book directly to the visible screen */
.cch-spread-frame.cch-iphone-spread-frame {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  place-items: start center !important;

  overflow: hidden !important;
}
}
/* iPhone: keep center-gutter arrows tappable above the spread */
.cch-iphone-spread-frame
.cch-spread-control-overlay
.cch-reader-arrow-group {
  z-index: 200 !important;
  pointer-events: auto !important;
}

.cch-iphone-spread-frame
.cch-spread-control-overlay
.cch-reader-arrow {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
/* iPhone: small top-center Library + Audio tray */
.cch-iphone-reader-tray {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 220;
  transform: translateX(-50%);
  pointer-events: auto;
}

.cch-iphone-reader-tray__toggle {
  position: relative;
  z-index: 401;

  display: grid;
  width: 96px;
  height: 60px;
  margin: 0 auto;
  padding: 0;
  place-items: start center;

  border: 0;
  background: transparent;
  color: #3c6983;
  box-shadow: none;

  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.cch-iphone-reader-tray__toggle::before {
  content: "";

  position: absolute;
  top: 7px;
  left: 22px;

  width: 52px;
  height: 28px;

  border: 2px solid rgba(60, 105, 131, .75);
  border-radius: 14px;

  background: rgba(248, 232, 197, .65);
  box-shadow: 0 3px 8px rgba(61, 52, 45, .18);

  pointer-events: none !important;
}
.cch-iphone-reader-tray__toggle svg {
  position: relative;
  z-index: 1;

  display: block;
  width: 21px;
  height: 21px;

  margin-top: 10px;

  pointer-events: none !important;
}

.cch-iphone-reader-tray.is-open
.cch-iphone-reader-tray__toggle svg {
  transform: rotate(180deg);
}

.cch-iphone-reader-tray__panel {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 5px;
  padding: 7px;

  border: 2px solid rgba(60, 105, 131, .75);
  border-radius: 16px;

  background: rgba(248, 232, 197, .65);
  box-shadow: 0 5px 14px rgba(61, 52, 45, .20);

  pointer-events: auto;
}

.cch-iphone-reader-tray.is-open
.cch-iphone-reader-tray__panel {
  display: flex;
}

.cch-iphone-reader-tray .cch-reader-library-button,
.cch-iphone-reader-tray .cch-reader-narration-button {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;

  transform: none !important;

  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;

  padding: 9px !important;

  border-color: rgba(60, 105, 131, .75) !important;
  background: rgba(248, 232, 197, .65) !important;
  color: #3c6983 !important;

  box-shadow: none !important;
  pointer-events: auto !important;
}

.cch-iphone-reader-tray .cch-reader-library-button {
  border-radius: 13px !important;
}

.cch-iphone-reader-tray .cch-reader-narration-button {
  border-radius: 50% !important;
}
/* iPhone: keep the top tray above all spread interaction layers */
.cch-iphone-reader-tray {
  z-index: 400 !important;
  pointer-events: auto !important;
}

.cch-iphone-reader-tray__toggle {
  z-index: 401 !important;
  pointer-events: auto !important;
}

.cch-iphone-reader-tray__toggle::before,
.cch-iphone-reader-tray__toggle svg {
  pointer-events: none !important;
}