/* ==========================================================================
   Story pages inside Kid Safe Mode.
   The story markup is shared with the grown-up site, so these are the same
   class names rendered in the bright kid palette instead of the night sky.
   ========================================================================== */

.wrap-narrow{ max-width:720px; margin-inline:auto; padding-inline:18px; }

.eyebrow{
  font-size:12px; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--sea); margin:0 0 10px; font-weight:600;
}

.display{
  font-family:"Baloo 2","Jost",sans-serif; font-weight:800;
  color:var(--ink); letter-spacing:0;
}

.lede{ font-size:18px; line-height:1.6; color:var(--ink-soft); }
.muted{ color:var(--ink-soft); }

.prose{ max-width:66ch; }
.prose p{
  margin:0 0 18px; color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:19px; line-height:1.78;
}
.prose p:first-child{ font-size:20px; }
.prose em{ font-style:italic; }

/* the hero picture above a tale */
.hero-paper{
  border-radius:16px; overflow:hidden; border:3px solid #fff;
  box-shadow:0 10px 28px rgba(39,49,61,.18);
}
.hero-paper img{ display:block; width:100%; }

.notice{
  background:#FFF8E4; border:2px solid #F3DCA4; border-radius:14px;
  padding:14px 16px; font-size:15.5px; color:#6A5314;
}

section{ padding-block:34px; }
.sec-head{ max-width:66ch; margin-bottom:22px; }

a{ color:var(--sea); }
.btn-gold{ background:var(--sun); color:#3A2A05; border-color:#D8940F; }
.btn-quiet{ background:#fff; color:var(--ink); border-color:var(--line); }