/* Vision Movie top-bar logo: one image replaces the eye-mark lockup on every page (Mal, 2026-10-03).
   The PNG carries real transparency (alpha from brightness), so the bar shows through and only
   the spectrum glow and the wordmark remain. Heights track the bar heights set in polish.css. */
.brand.vm-logo{gap:0;font-size:0;line-height:0;flex:none}
.brand.vm-logo img{display:block;height:96px;width:auto}
@media(max-width:1160px){.nav .brand.vm-logo img{height:88px}}
@media(max-width:570px){.nav .brand.vm-logo img{height:78px}}
.appbar .brand.vm-logo img{height:76px}
@media(max-width:860px){.appbar .brand.vm-logo img{height:72px}}
@media(max-width:520px){.appbar .brand.vm-logo img{height:62px}}
@media(max-width:790px){.appbar .wrap:has(#acctLink) .brand.vm-logo{font-size:0;gap:0}.appbar .wrap:has(#acctLink) .brand.vm-logo img{height:48px}}
@media(max-width:355px){.appbar .brand.vm-logo img{height:40px}}
/* footer: the same image, larger, centred over the link row */
.brand-stack.vm-logo{gap:0}
.brand-stack.vm-logo img{display:block;width:auto;height:170px}
@media(max-width:570px){.brand-stack.vm-logo img{height:130px}}
/* 2026-10-03 (Mal): header keyed like the footer - a taller bar so the glow has room to fade, no divider
   line under the bars, and the gold buttons become dark grey with white text. */
html .nav,html .appbar{border-bottom:0}
html .btn-primary{background:#24201c;border-color:#24201c;color:#fff;box-shadow:none}
html .btn-primary:hover{background:#322c26;border-color:#322c26;color:#fff}
/* no rule above the footer; a much smaller logo in the app bar (pages 1-10); and the logo above the
   small "report bug" footer on the account, unsubscribe and share pages (Mal, 2026-10-03) */
html .foot{border-top:0}
html .appbar .brand.vm-logo img{height:44px}
@media(max-width:520px){html .appbar .brand.vm-logo img{height:38px}}
.vm-foot-logo{display:flex;justify-content:center;padding:26px 0 0}
.vm-foot-logo .brand-stack.vm-logo img{height:110px}
/* no panel behind the header: the bars are transparent and sit straight on the page (Mal, 2026-10-03) */
html .nav,html .appbar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* 2026-10-03 (Mal): the public header no longer pins while scrolling; the hero's gold glow, whose clipped top
   edge read as a panel outline under the header, is gone; and the thin rules and panel outlines take the
   button colour. */
html .nav{position:static}
html .hero::before{display:none}
html{--line:#24201c;--line-2:#24201c}
/* a little air above the header so the glow is not cropped by the top of the window (Mal, 2026-10-03) */
html .nav{padding-top:12px}
/* app pages 1 and 2: the gold accent becomes blue - progress dot, labels, links, help button, focus rings -
   for as long as one of those two pages is the one showing (Mal, 2026-10-03) */
body:has(#p1:not([hidden])),body:has(#p2:not([hidden])){--gold:#4f8cff;--gold-dim:#2f5fb3;--gold-ink:#fff}

/* 2026-10-03 (Mal): landing header and footer logos three times the page-1 size (132px tall) */
html .nav .wrap{height:132px}
html .nav .brand.vm-logo img{height:132px}
/* 2026-10-10 (Mal): EVERY FOOTER LOGO IS DOUBLE SIZE - 264px tall (240px on phones) - on Vision Movie and, because every
   module inherits this file, the default for all modules from now on. The header logo stays 132px (locked 2026-10-03).
   A wide logo never outgrows a narrow screen: it keeps its shape and shrinks to the width it has (max-width), so a
   phone never scrolls sideways. A module that wants another footer size overrides these two lines in its own css. */
html .brand-stack.vm-logo,html .vm-foot-logo{max-width:100%}
html .vm-foot-logo{padding-left:16px;padding-right:16px;box-sizing:border-box}
html .brand-stack.vm-logo img,html .vm-foot-logo .brand-stack.vm-logo img{height:auto;width:auto;max-height:264px;max-width:100%}
@media(max-width:570px){html .nav .brand.vm-logo img{height:120px}html .brand-stack.vm-logo img,html .vm-foot-logo .brand-stack.vm-logo img{max-height:240px}}
/* 2026-10-12 (Mal: "I keep seeing the logo of the footer in the wrong size"): the movie page (/movie/<id>) shows the owner
   this same logo above the link row, but the page's own style pins it to 120px wide for the base site's lockup
   (.movie .sitemark .brand-stack img, in movie.html) and that outranked the two lines above. The same size here, with
   the selector that wins. web/tools/verify-footer-logo.mjs measures the footer logo on every page so this cannot drift. */
html .movie .sitemark .brand-stack.vm-logo{max-width:100%}
html .movie .sitemark .brand-stack.vm-logo img{height:auto;width:auto;max-height:264px;max-width:100%}
@media(max-width:570px){html .movie .sitemark .brand-stack.vm-logo img{max-height:240px}}
/* Phones (2026-10-04): the logo and the Start button cannot share one row - together they made every public page
   wider than the screen. Same answer as the app bar below: logo full size on its own row, button centred under it. */
@media(max-width:640px){
  html .nav .wrap{height:auto;flex-wrap:wrap;justify-content:center;row-gap:0;padding-bottom:12px}
  html .nav .brand.vm-logo{flex:0 0 100%;display:flex;justify-content:center}
  html .nav .brand.vm-logo img{max-width:100%}
  html .nav .spacer{display:none}
}
/* 2026-10-16: on the smallest phones the big gold button ("Start your bold vision here", 330px at full size) was wider
   than the screen, which stretched the landing hero's column and made the whole page scroll sideways at 320px. Under
   400px it takes tighter sides and a slightly smaller face, and may wrap rather than run past the edge. Words unchanged. */
@media(max-width:400px){html .btn-lg{max-width:100%;white-space:normal;text-align:center;line-height:1.2;padding-left:18px;padding-right:18px;font-size:17px}}
/* page 1: the creator line is a small byline under Hedley's movie, not a heading above it (Mal, 2026-10-03) */
.p1-byline{text-align:center;font:400 14px/1.4 var(--label);letter-spacing:.08em;color:var(--txt-2);margin:14px 0 0}
/* 2026-10-03 (Mal): the in-app bar matches page 1 - same 132px logo, same 132px bar, on every page of the app. */
html .appbar .wrap{height:132px}
html .appbar .brand.vm-logo img,html .appbar .wrap:has(#acctLink) .brand.vm-logo img{height:132px}
/* 2026-10-08 (Mal): the app bar scrolls away on every screen, like the public header. Pinned and see-through, it
   let each page's heading slide up under the logo as soon as you scrolled (seen on page 9). */
html .appbar{position:static}
/* A phone cannot fit a 349px logo beside the buttons: keep the logo full size, put the buttons on a row under it,
   and let the bar scroll away instead of taking a third of the screen. */
@media(max-width:700px){
  html .appbar{position:static}
  html .appbar .wrap{height:auto;flex-wrap:wrap;justify-content:center;row-gap:0;padding-bottom:12px}
  html .appbar .brand.vm-logo{flex:0 0 100%;display:flex;justify-content:center}
  html .appbar .brand.vm-logo img{max-width:100%}
}

/* page 7: Export Final Movie is a blue button (Mal, 2026-10-07) - beats the dark html .btn-primary above */
html #p7 #exportVideo{background:#4f8cff;border-color:#4f8cff;color:#fff}
html #p7 #exportVideo:hover{background:#6a9dff;border-color:#6a9dff;color:#fff}

/* 2026-10-08: the site-wide reading-text style now lives in the base polish.css (both sites). */