/* VESPER case study inside Nosta Log. Page layer only: the player keeps its own styles (#vesper-player).
   VESPER's stylesheet loads first; these rules restore Nosta Log's paper page around a dark screening band. */
html:has(.vesper-page){background:#f5f2eb;color-scheme:light}
.vesper-page{font:16px/1.7 Arial,Helvetica,sans-serif}
.vesper-page .eyebrow{display:block;font:700 11px/1.4 Arial,Helvetica,sans-serif;letter-spacing:1.7px;text-transform:none}
.vesper-page .eyebrow::before,.vesper-page .eyebrow i{display:none}

/* hero facts */
.vp-hero{align-items:end}
.vp-facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.vp-facts li{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.vp-facts span{font-size:11px;letter-spacing:1.7px;font-weight:700;color:#a63e27;text-transform:uppercase;padding-top:3px}

/* the screening band: Nosta Log's navy, the player's own glass inside */
.vp-screen{background:radial-gradient(900px 500px at 80% 0%,#1d3a5a 0,transparent 60%),#10263a;color:#f5f2eb;padding:44px 0 56px;scroll-margin-top:0}
.vp-screen-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}
.vp-brand{display:inline-flex;align-items:center;color:#cfe7ff;flex:none}
.vp-brand svg{height:18px;width:auto}
.vesper-page .screening-label{display:flex;gap:28px;margin:0 auto 0 0;color:#b9c6d2;font:700 11px/1 Arial,Helvetica,sans-serif;letter-spacing:1.7px}
.vesper-page .screening-label b{color:#fff;margin-left:8px}
.vp-modes{display:flex;gap:2px;padding:3px;border-radius:30px;background:#0a1a2a;box-shadow:inset 0 0 0 1px #ffffff1f}
.vp-modes .mode-button{all:unset;cursor:pointer;padding:8px 16px;border-radius:30px;font:700 12px/1 Arial,Helvetica,sans-serif;color:#b9c6d2;transition:background .2s,color .2s}
.vp-modes .mode-button:hover{color:#fff}
.vp-modes .mode-button.active,.vp-modes .mode-button[aria-pressed=true]{background:#f5f2eb;color:#10263a}
.vp-modes .mode-button:focus-visible{outline:2px solid #f4a486;outline-offset:2px}
.vp-stage{scroll-margin-top:12px}
.vesper-page .film-credit{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:22px 0 0;padding:0;border:0}
.vesper-page .film-credit h2{margin:0;font:500 24px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.5px;color:#fff}
.vesper-page .film-credit p{margin:4px 0 0;color:#b9c6d2;font-size:14px}
.vesper-page .film-credit>a{color:#f4a486;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.vesper-page .film-credit>a:hover{text-decoration:underline}
.vp-tip{margin:18px 0 0;padding-top:16px;border-top:1px solid #ffffff1f;color:#b9c6d2;font-size:13px}
/* the full demo picker lives on the VESPER site; here the page stays focused on one film */
.vesper-page .demo-chooser,.vesper-page .feature-notes{display:none!important}

/* call to action */
.vp-cta{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end;border-top:1px solid var(--line)}
.vp-cta .service-actions{justify-content:flex-end}

/* VESPER's sheet carries a few element rules for its own page (nav pill, footer bar, h1 em).
   Reset them for Nosta Log's header, footer and headings. */
.vesper-page .service-header nav{display:flex;align-items:center;gap:22px;border:0;background:none;border-radius:0;padding:0}
.vesper-page .service-footer{min-height:0;color:inherit;font-size:13px}
.vesper-page .service-footer>a:last-child{margin-left:0}
.vesper-page .vp-hero h1 em{color:#a63e27;font-style:italic}
@media (max-width:640px){.vesper-page .service-footer{font-size:12px;gap:10px}}

/* VESPER's sheet sets global link and focus colours for its dark page; keep Nosta Log's here */
.vesper-page .service-header a,.vesper-page .service-footer a{color:inherit}
.vesper-page .service-section a{color:inherit}
.vesper-page .service-page a:focus-visible,.vesper-page a:focus-visible{outline:2px solid #a63e27;outline-offset:3px}
.vp-screen a:focus-visible{outline-color:#f4a486}

@media (max-width:860px){
 .vp-screen-top{flex-direction:column;align-items:flex-start}
 .vp-cta{grid-template-columns:1fr}
 .vp-cta .service-actions{justify-content:flex-start}
 .vesper-page .film-credit{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
 .vp-screen .wrap{width:calc(100% - 16px)}
 .vp-screen{padding:28px 0 40px}
 .vesper-page .screening-label{flex-direction:column;gap:8px}
}