/* Saint Coloring Pages — scoped styles ported from the design's helmet <style>. */
.cp-sans{ font-family:'Plus Jakarta Sans', sans-serif; }
.cp-serif{ font-family:'EB Garamond', Georgia, serif; }
#cp-root a{ color:#B0473C; text-decoration:none; }
#cp-root a:hover{ color:#97382E; }
#cp-root input, #cp-root button{ font-family:'Plus Jakarta Sans', sans-serif; }
#cp-root input:focus{ outline:none; border-color:#B0473C !important; }
#cp-root ::placeholder{ color:#b3aa9c; }

/* /saint-coloring sits on a light background, so the fixed site header must
   always use the solid, dark-text treatment rather than the cream-on-hero
   default that only kicks in on scroll. */
main#top{ padding-top:76px; }
.site-header:not(.scrolled){
  color:var(--color-text-primary);
  background:rgba(250,247,242,0.85);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 1px 0 var(--color-border);
}

@keyframes cpFade{ from{opacity:0} to{opacity:1} }
@keyframes cpRise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes cpPop{ 0%{transform:scale(0.6); opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1); opacity:1} }

/* Print: drop the site chrome and every control, and let each page box sit at
   its true paper size instead of the scaled-down on-screen preview. */
@media print{
  .cp-noprint, .site-header, .mobile-menu, .footer{ display:none !important; }
  body{ background:#FFFFFF !important; }
  main#top{ padding-top:0 !important; }
  .cp-scale-wrap{ height:auto !important; width:auto !important; overflow:visible !important; }
  .cp-scale-inner{ transform:none !important; width:auto !important; }
  .cp-sheet-viewport{ background:#FFFFFF !important; padding:0 !important; gap:0 !important; }
  .cp-page{ box-shadow:none !important; margin:0 !important; }
}
@page{ size:auto; margin:0; }