/* ---- additions: book, sample reader, watch, faith ---- */
#root{ display:none; }
/* keep the dock clickable while a panel is open so users can switch sections directly */
@media (min-width:1025px){
  .dock{ z-index:11; transition: left .42s cubic-bezier(.16,1,.3,1); }
  /* the dock lives inside the transformed stage, so it can't sit above the fixed overlay; let clicks pass
     through the dim to the stage (the stage closes the drawer on outside clicks, the dock switches drawers) */
  .overlay.open{ pointer-events:none; }
  .overlay.open .panel{ pointer-events:auto; }
  /* re-centre the dock in the space left of an open drawer so they never overlap */
  /* the dock lives inside the scaled stage, so convert viewport px to stage px */
  body.panel-open .dock{ left: calc((100vw - clamp(500px, 34vw, 720px)) / 2 / var(--stage-scale, 1)); }
  body.panel-open.panel-open-resources .dock{ left: calc((100vw - clamp(400px, 34vw, 480px)) / 2 / var(--stage-scale, 1)); }
}


.cta.placeholder{ opacity:.7; cursor:default; }
.cta-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.cta-row .cta{ margin-top:0; }

/* book panel — fills the drawer, larger type, actions up top beside the mock-up */
.panel-body.book-body{
  display:flex; flex-direction:column;
  min-height:calc(100vh - (clamp(500px, 34vw, 720px) / 2));
  padding-bottom:30px;
}
@media (max-width:1024px){ .panel-body.book-body{ min-height:calc(100vh - (clamp(300px, 55vw, 560px) / 2)); } }
.book-body p{ font-size:17px; line-height:1.65; margin:0 0 16px; }
.book-hero{ display:flex; gap:22px; align-items:center; margin:2px 0 22px; }
.book-hero img{
  width:200px; flex-shrink:0;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.28));
}
.book-hero-info{ flex:1; min-width:0; }
.book-badge{
  display:inline-block; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:12.5px;
  background:rgba(var(--panel-color-rgb,181,72,47),.14); color:var(--panel-color,#b5482f);
  padding:4px 12px; border-radius:999px; margin-bottom:10px;
}
.book-hero-title{ font-family:'Fraunces',serif; font-size:24px; font-weight:600; color:#2c2015; margin:0 0 4px; line-height:1.15; }
.book-body .book-hero-by{ font-size:15px; color:#6b5744; margin:0 0 14px; }
.book-hero .cta-row{ margin-top:0; }
.book-hero .cta{ padding:12px 18px; font-size:15px; }
.book-lede{ font-family:'Fraunces',serif; font-size:20px !important; line-height:1.5 !important; color:#2c2015; }
.book-details{
  list-style:none; padding:18px 0; margin:6px 0 22px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px 12px;
  border-top:1px solid rgba(var(--panel-color-rgb,181,72,47),.3); border-bottom:1px solid rgba(var(--panel-color-rgb,181,72,47),.3);
}
.book-details span{ display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8a7660; margin-bottom:4px; }
.book-details strong{ font-family:'Fraunces',serif; font-size:16px; font-weight:600; color:#2c2015; line-height:1.25; }
.book-foot{ margin-top:auto; }
.book-foot .verse{ margin-bottom:18px; }
@media (max-width:600px){
  .book-hero{ flex-direction:column; align-items:flex-start; }
  .book-hero img{ width:160px; }
  .book-details{ grid-template-columns:1fr 1fr; }
  .book-body p{ font-size:16px; }
}

/* sample reader */
.sample-header{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.sample-chapter{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--panel-color,#3f7fa8); }
.sample-title{ font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:#2c2015; margin:0 0 14px; }
.sample-text p{ font-family:'Fraunces',serif; font-size:16.5px; line-height:1.75; color:#3a2c1e; text-indent:1.4em; margin:0 0 12px; }
.sample-text p:first-of-type{ text-indent:0; }
.sample-text p:first-of-type::first-letter{
  font-family:'Fraunces',serif; font-weight:800; font-size:3.4em; line-height:.8;
  float:left; margin:6px 8px 0 0; color:var(--panel-color,#3f7fa8);
}
.sample-end{
  margin-top:18px; padding:16px 18px; border-radius:14px;
  background:rgba(var(--panel-color-rgb,63,127,168),.12);
  border:1px dashed rgba(var(--panel-color-rgb,63,127,168),.45);
}
.sample-end p{ margin:0 0 10px; font-size:14px; }

/* author panel — magazine feature */
.panel-header.has-hero{ aspect-ratio:auto; height:min(72vh, 640px); }
.panel-header.has-hero .panel-title-wrap{
  background:
    linear-gradient(0deg, rgba(20,12,6,.82) 0%, rgba(20,12,6,.45) 32%, rgba(20,12,6,0) 60%);
}
.panel-header.has-hero .panel-title-wrap h2{ max-width:100%; font-size:42px; letter-spacing:-.01em; }
.author-portrait{ position:absolute; inset:0; }
.author-portrait-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,236,200,.35) 0%, rgba(255,236,200,0) 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,0) 2px 7px),
    linear-gradient(160deg, #a67c52 0%, #6e4a2a 55%, #3f2a17 100%);
}
.author-portrait-placeholder::before{
  content:''; position:absolute; inset:18px; border:1px solid rgba(255,240,215,.35); border-radius:6px;
}
.author-portrait-placeholder .monogram{
  font-family:'Fraunces',serif; font-weight:300; font-size:clamp(96px, 26vw, 150px); line-height:1; letter-spacing:.06em;
  color:rgba(255,240,215,.9); text-shadow:0 8px 30px rgba(0,0,0,.35);
}
.author-portrait-placeholder .caption{
  font-family:'Karla',sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,240,215,.75); border-top:1px solid rgba(255,240,215,.35); padding-top:10px;
}
.author-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.author-role{
  font-family:'Karla',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--panel-color,#7a5c3a); margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid rgba(122,92,58,.3);
}
.author-lede{ font-family:'Fraunces',serif; font-size:19px; line-height:1.5; color:#2c2015; }
.author-lede.dropcap::first-letter{
  font-family:'Fraunces',serif; font-weight:700; font-size:3.6em; line-height:.82; float:left; margin:6px 10px 0 0;
  color:var(--panel-color,#7a5c3a);
}
.author-quote{
  margin:22px 0; padding:6px 0 6px 22px; border-left:3px solid var(--panel-color,#7a5c3a);
  font-family:'Fraunces',serif; font-size:21px; line-height:1.4; color:#3a2c1e; font-style:italic;
}
.author-quote em{ font-style:normal; color:var(--panel-color,#7a5c3a); }
.author-link{ color:var(--panel-color,#c1652f); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.author-facts{
  list-style:none; padding:16px 0; margin:22px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  border-top:1px solid rgba(122,92,58,.3); border-bottom:1px solid rgba(122,92,58,.3);
}
.author-facts li{ text-align:center; }
.author-facts strong{ display:block; font-family:'Fraunces',serif; font-weight:600; font-size:30px; line-height:1; color:#2c2015; }
.author-facts span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8a7660; margin-top:6px; line-height:1.3; }
.author-books{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.author-books-label{ grid-column:1 / -1; font-family:'Karla',sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8a7660; }
.author-book{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.7); border:none; border-radius:12px; padding:8px 10px; text-align:left; font-family:inherit;
}
.author-book img{ width:52px; height:52px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.author-book span{ display:flex; flex-direction:column; gap:2px; }
.author-book strong{ font-family:'Fraunces',serif; font-size:13.5px; font-weight:600; color:#2c2015; line-height:1.2; }
.author-book small{ font-size:11.5px; color:#8a7660; }
button.author-book{ cursor:pointer; transition:transform .18s ease, background-color .18s ease; }
button.author-book:hover{ transform:translateY(-2px); background:#fff; }
@media (max-width:600px){
  .panel-header.has-hero .panel-title-wrap h2{ font-size:30px; }
  .author-facts{ grid-template-columns:repeat(2,1fr); }
  .author-books{ grid-template-columns:1fr; }
}

/* watch panel */
.video-player{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  background:#120c08; box-shadow:0 14px 34px rgba(0,0,0,.35); margin-bottom:10px;
}
.video-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; }
.video-now{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:#2c2015; margin:0 0 20px; line-height:1.3; }
.video-now span{ display:block; font-family:'Karla',sans-serif; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--panel-color,#7a52a3); margin-bottom:3px; }
.video-group{ margin-bottom:20px; }
.video-group h3{
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase;
  color:#7a6650; margin:0 0 10px;
}
.video-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.video-card{
  position:relative; display:block; border-radius:12px; overflow:hidden; cursor:pointer;
  background:#fff; box-shadow:0 3px 10px rgba(0,0,0,.1); border:none; padding:0; text-align:left;
  transition:transform .15s ease, box-shadow .15s ease;
}
.video-card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.18); }
.video-card.playing{ outline:3px solid var(--panel-color,#7a52a3); outline-offset:-3px; }
.video-card .thumb{ position:relative; aspect-ratio:16/9; background:#1a1410 center/cover no-repeat; }
.video-card .thumb::after{
  content:''; position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%,-50%);
  border-radius:50%; background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23231a12'/%3E%3C/svg%3E") 55% 50%/18px no-repeat;
  box-shadow:0 4px 12px rgba(0,0,0,.35); transition:transform .15s ease;
}
.video-card:hover .thumb::after{ transform:translate(-50%,-50%) scale(1.12); }
.video-card .label{ padding:9px 10px 10px; font-family:'Karla',sans-serif; font-size:12.5px; font-weight:600; line-height:1.35; color:#3a2c1e; }
.channel-link{ display:flex; align-items:center; gap:8px; }

/* faith panel */
.scripture{
  background:#fff; border-radius:16px; padding:22px 22px 18px; margin:16px 0 20px;
  box-shadow:0 3px 10px rgba(0,0,0,.08); border-top:5px solid var(--panel-color,#c99a2e);
}
.scripture h3{ font-family:'Fraunces',serif; font-size:18px; font-weight:600; margin:0 0 12px; color:#2c2015; }
.scripture p{ font-family:'Fraunces',serif; font-size:15px; line-height:1.75; color:#3a2c1e; margin:0 0 10px; }
.scripture sup{ font-family:'Karla',sans-serif; font-size:10px; font-weight:700; color:var(--panel-color,#c99a2e); margin-right:3px; }
.faith-note{ font-size:14.5px; }
.prompts{ list-style:none; padding:0; margin:0 0 6px; counter-reset:q; }
.prompts li{
  position:relative; padding:12px 14px 12px 46px; margin-bottom:8px; border-radius:12px;
  background:rgba(255,255,255,.7); font-size:14px; line-height:1.5; color:#3a2c1e;
}
.prompts li::before{
  counter-increment:q; content:counter(q);
  position:absolute; left:12px; top:10px; width:26px; height:26px; border-radius:50%;
  background:var(--panel-color,#c99a2e); color:#fff; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.panel h3.section{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; color:#2c2015; margin:22px 0 10px; }

@media (max-width:600px){
  .video-grid{ grid-template-columns:1fr; }
}

/* ---- award medals (top right of the hero) ---- */
.medals{ position:absolute; top:calc(34px + var(--top-crop, 0px)); right:34px; z-index:6; display:flex; gap:30px; align-items:flex-start; }
.medal{ position:relative; margin:0; width:124px; height:124px; cursor:pointer; outline:none; animation:medal-float 5.5s ease-in-out infinite; }
.medal:nth-child(2){ animation-delay:-1.8s; }
.medal:nth-child(3){ animation-delay:-3.6s; }
.medal img{
  width:124px; height:124px; object-fit:contain; display:block;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));
  transform-origin:top right;
  transition:transform .45s cubic-bezier(.16,1,.3,1), filter .3s ease;
}
.medal figcaption{
  position:absolute; top:calc(100% * 4 + 14px); right:0; width:496px; text-align:center;
  color:#fdf6e6; opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .3s ease .12s, transform .3s ease .12s;
}
.medal figcaption strong{ display:block; font-family:'Fraunces',serif; font-size:30px; font-weight:600; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.medal figcaption span{ display:block; font-family:'Karla',sans-serif; font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; opacity:.9; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.medal:hover, .medal:focus-visible, .medal.pinned{ z-index:8; animation-play-state:paused; }
.medal:hover img, .medal:focus-visible img, .medal.pinned img{ transform:scale(4); filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)); }
.medal:hover figcaption, .medal:focus-visible figcaption, .medal.pinned figcaption{ opacity:1; transform:translateY(0); }
/* the whole top row follows the visible top edge when the stage is cropped vertically */
.title-card{ top:calc(28px + var(--top-crop, 0px)); }
.hint{ top:calc(176px + var(--top-crop, 0px)); }
.title-wordmark{ cursor:pointer; }
.title-wordmark:hover{ transform:scale(1.03); }

/* snowfall layer */
.snow-canvas{ position:fixed; inset:0; z-index:30; pointer-events:none; opacity:0; transition:opacity .8s ease; }
.snow-canvas.on{ opacity:1; }

.medals img:nth-child(2){ animation-delay:-1.8s; }
.medals img:nth-child(3){ animation-delay:-3.6s; }
@keyframes medal-float{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-9px) rotate(1.5deg); } }

/* the Star grows brighter and bigger when the scene turns to night */
.star{ transition:transform .9s cubic-bezier(.16,1,.3,1), width .9s ease, height .9s ease; }
.stage.dusk .star{ transform:scale(1.9); }
.stage.dusk .star svg{ filter:drop-shadow(0 0 12px rgba(255,240,190,1)) drop-shadow(0 0 28px rgba(255,220,140,.8)); }

/* ---- faith drawer: readability ---- */
.panel-body.faith-body{ background:rgba(253,248,238,.94); }
.faith-body p, .faith-body .faith-note{ font-size:16.5px; line-height:1.7; color:#2a1d12; }
.faith-body .scripture p{ color:#2a1d12; font-size:15.5px; }
.faith-body .prompts li{ background:#fff; color:#2a1d12; font-size:15px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.faith-body h3.section, .faith-body .scripture h3{
  font-family:'Fraunces',serif; font-weight:700; font-size:24px; letter-spacing:-.01em; margin:26px 0 12px;
  background:linear-gradient(120deg, #7a5410 0%, #d9a83a 45%, #f2d27a 55%, #a3741c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 3px 6px rgba(90,60,10,.25));
  position:relative; padding-bottom:8px;
}
.faith-body h3.section::after, .faith-body .scripture h3::after{
  content:''; position:absolute; left:0; bottom:0; width:56px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, #c99a2e, rgba(201,154,46,0));
}
.faith-body .scripture{ background:#fff; }
.faith-body .scripture h3{ margin-top:0; }
.cta.gold{
  background:linear-gradient(135deg, #e0b347, #b8862a); color:#2a1d12; border:2px solid #f2d27a;
  box-shadow:0 6px 16px rgba(184,134,42,.35);
}
.cta.gold:hover{ background:linear-gradient(135deg, #f0c65a, #c9942f); color:#1d140d; }

/* nativity video */
.faith-video{ position:relative; border-radius:16px; overflow:hidden; background:#0b0f1e; box-shadow:0 14px 34px rgba(0,0,0,.35); margin:0 0 6px; }
.faith-video video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.faith-video-controls{ position:absolute; right:12px; bottom:40px; display:flex; gap:8px; }
.fv-btn{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; font-size:15px; line-height:1;
  background:rgba(253,246,230,.9); color:#2a1d12; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.35); transition:transform .15s ease, background-color .15s ease;
}
.fv-btn:hover{ transform:scale(1.08); background:#fff; }
.faith-video-caption{ display:block; padding:9px 14px; font-size:12.5px; color:#fdf6e6; background:#0b0f1e; letter-spacing:.02em; }

/* while a game is open, rest the animated scene so the game gets the frame budget */
body.game-open .stage{ visibility:hidden; }
body.game-open .char-layer img{ display:none; }
body.game-open .game-overlay{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#1a120b; }
/* wordmark pop when the snow starts */
@keyframes wordmark-pop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.12) rotate(-2deg); } 65%{ transform:scale(.97) rotate(1deg); } 100%{ transform:scale(1); } }
.title-wordmark.pop{ animation:wordmark-pop .7s cubic-bezier(.34,1.56,.64,1); }

/* watch: full-screen video lightbox */
.watch-intro{ font-size:14px; color:#8a7660; margin:0 0 14px; }
.video-lightbox{
  position:fixed; inset:0; z-index:45; display:flex; align-items:center; justify-content:center;
  background:rgba(10,7,4,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.video-lightbox.open{ opacity:1; pointer-events:auto; }
.video-lightbox-frame{ width:min(92vw, calc(88vh * 16 / 9)); transform:scale(.94); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.video-lightbox.open .video-lightbox-frame{ transform:none; }
.video-lightbox-player{ position:relative; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.video-lightbox-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; }
.video-lightbox-title{ color:#fdf6e6; font-family:'Fraunces',serif; font-size:18px; margin:14px 4px 0; }
.video-lightbox-close{ position:absolute; top:18px; right:22px; width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.video-lightbox-close:hover{ background:rgba(255,255,255,.3); }
.faith-video-slot video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#0b0f1e; }

/* keep the drawer close button above the poster header */
.panel .close{ z-index:6; background:rgba(20,12,6,.45); }
.panel .close:hover{ background:rgba(20,12,6,.7); }

/* title overlays must not swallow the wordmark click (snow) */
.title-glow, .snow-field, .snow-field *{ pointer-events:none; }
.title-wordmark{ position:relative; z-index:2; }

/* social buttons by the well (bottom-left) + copyright (bottom-right) */
.social-dock{ position:absolute; left:34px; bottom:30px; z-index:6; display:flex; gap:12px; }
.social-dock a{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(253,246,230,.92); color:#5a3a1e; box-shadow:0 6px 14px rgba(0,0,0,.35);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background-color .2s ease, color .2s ease;
}
.social-dock a svg{ width:22px; height:22px; }
.social-dock a:hover{ transform:translateY(-4px) scale(1.08); background:var(--gold,#c99a2e); color:#2c2015; }
.copyright{
  position:absolute; right:34px; bottom:34px; z-index:6; font-family:'Karla',sans-serif; font-size:12px; letter-spacing:.04em;
  color:rgba(253,246,230,.85); text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* watch: trailer feature + subscribe badge */
.watch-feature{ display:block; position:relative; border-radius:16px; overflow:hidden; cursor:pointer; border:none; padding:0; width:100%; text-align:left; margin:0 0 22px; box-shadow:0 12px 30px rgba(0,0,0,.25); font-family:inherit; }
.watch-feature img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .5s ease; }
.watch-feature:hover img{ transform:scale(1.04); }
.watch-feature .wf-text{ position:absolute; left:0; right:0; bottom:0; padding:44px 20px 18px; background:linear-gradient(0deg, rgba(10,6,2,.85), rgba(10,6,2,0)); color:#fdf6e6; }
.watch-feature .wf-text small{ display:block; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold,#c99a2e); margin-bottom:4px; }
.watch-feature .wf-text strong{ font-family:'Fraunces',serif; font-size:22px; font-weight:600; }
.watch-feature .wf-play{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.watch-feature .wf-play::after{ content:''; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent #231a12; margin-left:5px; }
.yt-badge{ display:flex; align-items:center; gap:14px; background:#fff; border-radius:16px; padding:14px 16px; margin:6px 0 22px; box-shadow:0 3px 10px rgba(0,0,0,.08); }
.yt-badge .yt-avatar{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid #f1e7d2; }
.yt-badge .yt-meta{ flex:1; min-width:0; }
.yt-badge .yt-meta strong{ display:block; font-family:'Fraunces',serif; font-size:16px; color:#2c2015; }
.yt-badge .yt-meta span{ font-size:12.5px; color:#8a7660; }
.yt-subscribe{ background:#ff0000; color:#fff; border-radius:999px; padding:10px 18px; font-family:'Karla',sans-serif; font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap; transition:background-color .2s ease, transform .2s ease; }
.yt-subscribe:hover{ background:#cc0000; transform:scale(1.04); }

/* author: contact button + links */
.author-contact-btn{
  position:absolute; right:26px; bottom:26px; width:54px; height:54px; border-radius:50%; border:2px solid rgba(255,255,255,.7);
  background:var(--gold,#c99a2e); color:#2c2015; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.4); transition:transform .2s cubic-bezier(.34,1.56,.64,1); z-index:3;
}
.author-contact-btn svg{ width:26px; height:26px; }
.author-contact-btn:hover{ transform:scale(1.1); }
.author-links{ display:flex; gap:10px; margin:-8px 0 18px; }
.author-links a{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--panel-color,#7a5c3a); text-decoration:none; background:rgba(255,255,255,.7); border-radius:999px; padding:7px 12px; }
.author-links a svg{ width:16px; height:16px; }
.author-links a:hover{ background:#fff; }
.contact-modal{ position:fixed; inset:0; z-index:46; display:flex; align-items:center; justify-content:center; background:rgba(14,10,6,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.contact-modal.open{ opacity:1; pointer-events:auto; }
.contact-card{ width:min(92vw, 440px); background:#fdf8ee; border-radius:22px; padding:30px 28px; text-align:center; box-shadow:0 30px 70px rgba(0,0,0,.5); transform:scale(.94); transition:transform .35s cubic-bezier(.16,1,.3,1); position:relative; }
.contact-modal.open .contact-card{ transform:none; }
.contact-card h3{ font-family:'Fraunces',serif; font-size:26px; margin:0 0 6px; color:#2c2015; }
.contact-card p{ font-size:14.5px; color:#6b5744; margin:0 0 20px; }
.contact-card .cta{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin:0 0 10px; box-sizing:border-box; }
.contact-card .cta svg{ width:20px; height:20px; }
.contact-close{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:none; background:rgba(0,0,0,.06); cursor:pointer; font-size:16px; }

/* story drawer */
.panel-body.story-body{ display:flex; flex-direction:column; min-height:calc(100vh - (clamp(500px, 34vw, 720px) / 2)); padding-bottom:30px; }
.story-body p{ font-size:17px; line-height:1.65; }
.story-hook{ font-family:'Fraunces',serif; font-size:26px; line-height:1.3; color:#2c2015; margin:4px 0 18px; font-weight:600; }
.story-hook em{ color:var(--panel-color,#3f7fa8); font-style:italic; }
.story-mini{ display:flex; align-items:center; gap:18px; background:#fff; border-radius:18px; padding:16px 18px; border:none; width:100%; text-align:left; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.12); margin:10px 0 22px; font-family:inherit; transition:transform .2s ease, box-shadow .2s ease; }
.story-mini:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.18); }
.story-mini .mini-book{ display:flex; perspective:800px; flex-shrink:0; }
.story-mini .mini-book img{ width:74px; height:74px; object-fit:cover; box-shadow:0 6px 14px rgba(0,0,0,.25); }
.story-mini .mini-book img:first-child{ border-radius:6px 0 0 6px; transform:rotateY(18deg); transform-origin:right; }
.story-mini .mini-book img:last-child{ border-radius:0 6px 6px 0; transform:rotateY(-18deg); transform-origin:left; }
.story-mini strong{ display:block; font-family:'Fraunces',serif; font-size:18px; color:#2c2015; }
.story-mini span{ font-size:13.5px; color:#8a7660; }
.story-foot{ margin-top:auto; }
@media (max-width:1024px){ .panel-body.story-body{ min-height:calc(100vh - (clamp(300px, 55vw, 560px) / 2)); } }

/* ---- characters drawer: design-bible cards ---- */
.cast-body .cast-intro{ font-size:15px; color:#5a4735; margin:0 0 6px; }
.cast-heading{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--panel-color,#b5763a); margin:22px 0 12px; display:flex; align-items:center; gap:12px; }
.cast-heading::after{ content:''; flex:1; height:1px; background:rgba(var(--panel-color-rgb,181,118,58),.35); }
.cast-main{ display:flex; flex-direction:column; gap:12px; }
.cast-main-card{
  display:flex; align-items:center; gap:18px; width:100%; text-align:left; cursor:pointer; font-family:inherit;
  background:rgba(255,255,255,.82); border:none; border-left:6px solid var(--card-color,#b5763a); border-radius:18px; padding:14px 18px 14px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.1); transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.cast-main-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.16); background:#fff; }
.cast-main-card:hover img{ transform:scale(1.06) rotate(-1.5deg); }
.cast-main-card img{ width:110px; height:130px; object-fit:contain; flex-shrink:0; filter:drop-shadow(0 8px 10px rgba(0,0,0,.25)); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.cast-main-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cast-role{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--card-color,#8a7660); }
.cast-main-text strong{ font-family:'Fraunces',serif; font-size:22px; font-weight:600; color:#2c2015; line-height:1.1; }
.cast-desc{ font-size:14px; line-height:1.5; color:#4a3a2c; }
.cast-facts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.cast-facts span{ font-size:11.5px; font-weight:600; color:#5a4735; background:rgba(var(--panel-color-rgb,181,118,58),.12); border-radius:999px; padding:3px 10px; }
.cast-more{ font-size:12.5px; font-weight:700; color:var(--card-color,#b5763a); margin-top:4px; }
.cast-support{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cast-support-card{ display:flex; flex-direction:column; gap:10px; background:rgba(255,255,255,.72); border-radius:16px; padding:14px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.cast-support-art{ display:flex; justify-content:center; align-items:flex-end; gap:4px; height:120px; }
.cast-support-art img{ max-height:120px; max-width:100%; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(0,0,0,.22)); }
.cast-support-card strong{ font-size:17px; }
.cast-support-card .cast-desc{ font-size:13px; }
.cast-footnote{ margin-top:18px; font-size:13px; color:#8a7660; }
.char-portrait{ margin:-6px 0 18px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; padding:18px 12px 12px; border-radius:18px; background:radial-gradient(ellipse at 50% 100%, rgba(var(--panel-color-rgb,181,118,58),.28) 0%, rgba(255,255,255,0) 70%); }
.char-portrait img{ max-height:300px; max-width:100%; object-fit:contain; filter:drop-shadow(0 14px 18px rgba(0,0,0,.3)); }
.char-portrait figcaption{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#6b5744; }
@media (max-width:600px){
  .cast-support{ grid-template-columns:1fr; }
  .cast-main-card{ gap:12px; padding:12px; }
  .cast-main-card img{ width:84px; height:104px; }
}

/* ---- restore the frosted-glass drawer look ---- */
.panel{
  background:linear-gradient(160deg, rgba(255,250,240,.30) 0%, rgba(255,250,240,.14) 45%, rgba(120,90,60,.18) 100%);
  backdrop-filter:blur(26px) saturate(1.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);
  border-left:1px solid rgba(255,255,255,.55);
  box-shadow:-24px 0 70px rgba(0,0,0,.4), inset 1px 0 0 rgba(255,255,255,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.panel-body{ background:rgba(251,243,227,.34); }
.panel-body.faith-body{ background:rgba(253,248,238,.82); }
.panel-header.has-poster{ background:rgba(29,20,13,.55); }

/* ---- brand-colour social buttons by the well ---- */
.social-dock a{ background:#fff; color:#fff; padding:0; overflow:hidden; }
.social-dock a svg{ width:100%; height:100%; }
.social-dock a:hover{ background:#fff; color:#fff; }

/* resources intro */
.resource-hook .story-hook{ font-size:23px; margin:2px 0 12px; }
.resource-hook .story-hook em{ color:var(--panel-color,#4f7c4a); }
.resource-hook p:not(.story-hook){ font-size:15.5px; line-height:1.6; color:#3a2c1e; margin:0 0 16px; }
.resource-who{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:8px; }
.resource-who li{ display:flex; align-items:baseline; gap:12px; background:rgba(255,255,255,.72); border-radius:12px; padding:10px 14px; border-left:4px solid var(--panel-color,#4f7c4a); }
.resource-who strong{ font-family:'Baloo 2',sans-serif; font-size:14px; color:var(--panel-color,#4f7c4a); white-space:nowrap; min-width:112px; }
.resource-who span{ font-size:13.5px; color:#4a3a2c; line-height:1.4; }
.panel-body .resource-note{ margin:0 0 16px; }