/* "The day" skin for tool and library pages.
 * Loaded after styles.css + library.css. Adds the sky header behind the
 * existing .nav, day colours and type, a gold CTA, and the day footer.
 * Injected by scripts/apply_day_skin.py. */
@font-face{font-family:Newsreader;src:url('/assets/fonts/Newsreader-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/fonts/Manrope-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/assets/fonts/Manrope-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
  --day-ground:#FBF6EC;--day-ground2:#F3EADA;--day-ink:#13201A;--day-ink2:#3C5046;
  --day-gold-grad:linear-gradient(180deg,#EDCE84,#CE9E38 70%,#E2BC65);--day-gold-ink:#221806;--day-gold-deep:#7A5A12;
  --sky-h:190px;
}
body.day{background:var(--day-ground)}
/* Sky header: an absolutely placed photo behind the nav and a spacer strip. */
.day-sky{position:absolute;top:0;left:0;right:0;height:var(--sky-h);overflow:hidden;z-index:0;background:
 radial-gradient(50% 60% at 82% 10%,rgba(255,246,220,.95),rgba(255,246,220,0) 70%),
 linear-gradient(180deg,#9DC3E6 0%,#BCD7EE 30%,#DDE9F1 60%,#F2EEE3 85%,var(--day-ground) 100%)}
.day-sky .cloud{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));filter:blur(6px);opacity:.8;animation:daydrift 90s linear infinite alternate}
.day-sky .c1{width:520px;height:120px;left:-4%;top:22%}
.day-sky .c2{width:400px;height:90px;left:42%;top:8%;opacity:.65}
.day-sky .c3{width:600px;height:130px;right:-10%;top:44%;opacity:.55}
@keyframes daydrift{from{transform:translateX(-30px)}to{transform:translateX(40px)}}
@media (prefers-reduced-motion:reduce){.day-sky .cloud{animation:none}}
.day-sky-space{position:relative;z-index:1;height:calc(var(--sky-h) - 68px)}
body.day .nav{position:relative;z-index:30;background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none}
body.day .nav .brand,body.day .nav .brand span{color:var(--day-ink)}
body.day .nav .nav-links>a:not(.nav-cta){color:var(--day-ink)}
body.day .nav .nav-toggle{color:var(--day-ink)}
body.day .nav .nav-cta{background:var(--day-gold-grad);color:var(--day-gold-ink)!important;font-weight:700;box-shadow:0 8px 20px -10px rgba(186,140,44,.8)}
@media (max-width:900px){
  :root{--sky-h:150px}
  body.day .nav .nav-links>a:not(.nav-cta){color:var(--day-ink)}
  body.day .nav .nav-links{background:var(--day-ground)}
}
/* Type and colour on the ground */
body.day h1,body.day .lib-display{font-family:Newsreader,Georgia,serif;font-weight:400;letter-spacing:-.02em;color:var(--day-ink)}
/* Gold "Do this daily" CTA */
.day-cta{margin:18px 0 6px}
.day-cta a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--day-gold-grad);color:var(--day-gold-ink)!important;font:700 15px/1 Manrope,system-ui,sans-serif;text-decoration:none!important;box-shadow:0 8px 20px -10px rgba(186,140,44,.8);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.day-cta a:hover{transform:translateY(-1px)}
.day-cta a:active{transform:scale(.96)}
.day-cta svg{width:16px;height:16px}
/* Footer in the day palette */
body.day .footer{background:var(--day-ground2);border-top:0}
body.day .footer h5{letter-spacing:0;text-transform:none;font:600 15px/1.3 Manrope,system-ui,sans-serif;color:var(--day-gold-deep)}
body.day .footer a{color:var(--day-ink2)}
body.day .footer a:hover{color:var(--day-ink)}
body.day .footer .brand span{color:var(--day-ink)}
body.day .footer-brand p,body.day .footer-bottom{color:var(--day-ink2)}
body.day .page-hero{display:none}