@font-face{font-family:'Poiret One';src:url('/assets/fonts/card-titles/poiret-one-0.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
/* Google Sans is bundled under the site's existing Fernus Sans family name.
   60px desktop title = 90px reference / 1.5; phones use the same proportion. */
body#fernus-ui>.ff-scroll-title{
 position:fixed;inset:var(--ff-scroll-title-top,110px) auto auto 50%;z-index:490;
 display:flex;align-items:center;justify-content:center;box-sizing:border-box;
 width:max-content;max-width:calc(100vw - 40px);min-height:60px;padding:10px 24px 16px;text-align:center;
 font-family:'Poiret One','Fernus Sans',sans-serif;font-size:clamp(24px,2.8vw,38px);font-weight:400;line-height:1.15;
 color:#f4f5ef;overflow-wrap:anywhere;text-wrap:balance;pointer-events:none;isolation:isolate;
 opacity:0;visibility:hidden;transform:translate(-50%,-5px);
 transition:opacity .32s ease,transform .32s ease,visibility 0s linear .32s;
}
body#fernus-ui>.ff-scroll-title::before{
 content:'';position:absolute;inset:-4px -12px -8px;z-index:-1;pointer-events:none;
 background:linear-gradient(to bottom,#171d185c,#171d1838 65%,transparent);
 backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
 mask-image:radial-gradient(ellipse at center,#000 25%,#000a 50%,transparent 72%);
 -webkit-mask-image:radial-gradient(ellipse at center,#000 25%,#000a 50%,transparent 72%);
}
body#fernus-ui>.ff-scroll-title.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
@media(max-width:760px){body#fernus-ui>.ff-scroll-title{font-size:26px;min-height:48px;padding:8px 20px 12px}}
@media(prefers-reduced-motion:reduce){body#fernus-ui>.ff-scroll-title{transform:translateX(-50%);transition:opacity .12s ease,visibility 0s linear .12s}body#fernus-ui>.ff-scroll-title.is-visible{transition-delay:0s}}
