/* Chronicles: brings the carried-over section pages into the book.
   Same navigation, beige paper, and the section's own picture faded in behind the text. */
@import url("/nav.css");

html{background:var(--beige)}
body.mk-shared{background:transparent!important;padding-top:calc(var(--nav-h) + 8px);position:relative}
body.mk-shared::before{content:"";position:fixed;inset:-6%;z-index:-2;background:var(--beige) var(--page-pic,url("/media/silk-soft.jpg")) center/cover no-repeat;
  filter:blur(30px) saturate(.85) brightness(1.1);opacity:.55;animation:lgdrift 44s ease-in-out infinite alternate}
body.mk-shared::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 75% at 50% 45%,rgba(246,238,224,.92) 0%,rgba(237,225,204,.88) 55%,rgba(237,225,204,.78) 100%)}
@keyframes lgdrift{from{transform:scale(1.04)}to{transform:scale(1.12) translate(-1%,-1%)}}

/* the old mastheads, footers and page furniture give way to the book's navigation */
.mk-mast,.mk-foot,.mk-portfolio-nav,.mk-seal,body.mk-shared a.back{display:none!important}

/* paper surfaces take the beige of the book */
body.mk-shared :where(main,section,article,header,footer,.wrap,.hero,.card,.panel){background-color:transparent}
body.mk-shared :where(h1,h2,h3){color:var(--leather)}
body.mk-shared a:not(.btn):not(.brand){color:var(--burgundy)}

/* a picture at the top of each page, melting into the paper */
.lg-hero{max-width:1100px;margin:6px auto 0;padding:0 16px;line-height:0}
.lg-hero img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain;margin:0 auto;
  -webkit-mask-image:radial-gradient(ellipse 72% 80% at 50% 50%,#000 60%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 80% at 50% 50%,#000 60%,transparent 100%);
  animation:lgrise 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes lgrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.mk-shared{animation:lgfade .8s ease both}
@keyframes lgfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body.mk-shared::before,.lg-hero img,body.mk-shared{animation:none}}