/* =====================================================================
   3X CAPITAL — PREMIUM CINEMA · WHITE theme
   Option four, for the light references she sent (humaan.com/about,
   capiointeractive.com): paper ground, ink type, brand red. The film hero
   and the image heroes stay dark-graded with light type so the cinema
   reading survives; everything below them sits on bone and white.
   Applied when <body> carries .theme-white (?theme=white, remembered).
   ===================================================================== */

body.theme-white{
  --black:#f6f3ef;                 /* page ground: warm paper */
  --coal:#ffffff;                  /* alternate sections: white */
  --panel:#ffffff;
  --panel-2:#efebe6;
  --ink:#0a0a0a;
  --dim:rgba(10,10,10,.62);
  --faint:rgba(10,10,10,.42);
  --line:rgba(10,10,10,.13);
  --line-soft:rgba(10,10,10,.07);
  --red:#720000;
  --red-dark:#390000;
  --red-lift:#9e1212;              /* readable accent red on paper */
  --paper:#f6f3ef;
  --light:#f5f2f0;
}
body.theme-white{scrollbar-color:#c9c3bb var(--paper)}
body.theme-white ::selection{background:var(--red);color:#fff}

/* ---- heroes keep the dark grade and light type ---- */
body.theme-white .hero,body.theme-white .ph:not(.plain){color:var(--light)}
body.theme-white .hero .h1,body.theme-white .ph:not(.plain) .h1,body.theme-white .hero .h-line,body.theme-white .ph:not(.plain) .ph-sub,body.theme-white .ph:not(.plain) .tlink,body.theme-white .hero .tlink{color:var(--light)}
body.theme-white .hero .h1 i,body.theme-white .ph:not(.plain) .h1 i,body.theme-white .h-beat i{color:#e04848}
body.theme-white .hero .mono,body.theme-white .ph:not(.plain) .mono,body.theme-white .hero .h-loc{color:rgba(245,242,240,.72)}
body.theme-white .hero .tlink::after,body.theme-white .ph:not(.plain) .tlink::after{background:#e04848}
body.theme-white .h-cue span{color:rgba(245,242,240,.5)} body.theme-white .h-cue i{background:rgba(245,242,240,.25)}
body.theme-white .hero .btn-ghost,body.theme-white .ph:not(.plain) .btn-ghost{color:var(--light);border-color:rgba(245,242,240,.4)}
body.theme-white .ph.plain{background:var(--paper)}

/* header: light over a dark hero until it goes solid, then ink on paper */
body.theme-white.dark-hero header.site:not(.solid) .nav > ul > li > a,body.theme-white.dark-hero header.site:not(.solid) .burger i{color:var(--light)}
body.theme-white.dark-hero header.site:not(.solid) .burger i{background:var(--light)}
/* the film opens on bright frames (sky, canopies): light nav text needs its own
   contrast or it disappears into them. A soft shadow scrim reads as nothing on
   dark frames and keeps the labels legible on bright ones. */
body.theme-white.dark-hero header.site:not(.solid) .nav > ul > li > a{text-shadow:0 1px 14px rgba(5,5,5,.6),0 1px 3px rgba(5,5,5,.45)}
body.theme-white.dark-hero header.site:not(.solid) .nav > a img{filter:drop-shadow(0 1px 10px rgba(5,5,5,.5))}
body.theme-white header.site.solid{background:rgba(246,243,239,.88);border-bottom-color:var(--line)}
body.theme-white .mnav{background:var(--paper)}

/* ---- page wipes and preloader on paper ---- */
body.theme-white #wipe,body.theme-white .xfade{background:var(--paper)}
body.theme-white .pl-rail{background:rgba(10,10,10,.1)}
body.theme-white .pl-fill::after{box-shadow:none}

/* ---- logos: they were inverted for dark ground; on paper they show as drawn ---- */
body.theme-white .rail-g img,body.theme-white .logo-cell img,body.theme-white .rank .who img{filter:grayscale(1);opacity:.72}
body.theme-white .rail-g img:hover,body.theme-white a.logo-cell:hover img{opacity:1}

/* ---- cards and surfaces ---- */
body.theme-white .card{background:#fff;border-color:var(--line-soft);box-shadow:0 1px 0 rgba(10,10,10,.04)}
body.theme-white .sec.coal .card,body.theme-white .trend .card{background:var(--paper)}
body.theme-white .facts{background:#fff}
body.theme-white .frame{background:var(--panel-2)}
body.theme-white .icard{background:var(--panel-2)}
body.theme-white .acard{background:radial-gradient(120% 80% at 50% 100%,rgba(114,0,0,.16),var(--panel-2) 70%);border-color:var(--line-soft)}
body.theme-white .av{background:radial-gradient(120% 80% at 50% 100%,rgba(114,0,0,.10),transparent 70%),var(--panel-2)}
body.theme-white .g-stage::before{background:radial-gradient(circle,rgba(114,0,0,.18),transparent 65%)}
body.theme-white .rank tbody tr:hover{background:#fff}
body.theme-white .row::after{background:var(--ink)}
body.theme-white .btn-ghost{color:var(--ink);border-color:var(--line)}
body.theme-white .btn-ghost:hover{border-color:var(--ink)}
body.theme-white .btn-red:hover{box-shadow:0 16px 40px rgba(114,0,0,.28)}

/* ---- the reviews band stays the brand's maroon, white cards as in the first design ---- */
body.theme-white .trust .h2,body.theme-white .trust .tlink{color:#fff}
body.theme-white .trust .tlink::after{background:rgba(255,255,255,.7)}

/* ---- wizard on paper ---- */
body.theme-white .wiz{background:rgba(246,243,239,.82)}
body.theme-white .wiz-card span{color:#fff}
body.theme-white .wiz-flat span{color:var(--ink)}
body.theme-white .wiz-bar i{opacity:.55}

/* ---- cursor ---- */
body.theme-white .cur-ring .disc{border-color:rgba(10,10,10,.45)}
body.theme-white .cur-ring .tag{color:#fff}
body.theme-white.dark-hero .cur-ring .disc{border-color:rgba(245,242,240,.55)}

/* ---- motion accents ---- */
body.theme-white .pbar,body.theme-white .wipe-edge{background:var(--red)}
body.theme-white .f-streak{background:linear-gradient(90deg,var(--red),rgba(114,0,0,.4),transparent)}
body.theme-white .ticker i{background:var(--red)}

/* hero copy sits on paper now, not on the film */
body.theme-white .hero-copy{background:var(--paper)}
body.theme-white .hero-copy .ph-sub,body.theme-white .hero-copy .h-line{color:var(--dim)}

/* ============ MOBILE PASS (Oct 2026) ============ */
/* hero titles sit on photography: lift the title and its red accent off busy frames */
body.theme-white .ph:not(.plain) .h1{text-shadow:0 2px 26px rgba(0,0,0,.42)}
body.theme-white .ph:not(.plain) .h1 i{text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 26px rgba(0,0,0,.55)}
@media(max-width:700px){
  body.theme-white .rail-g img{opacity:.95;filter:grayscale(1) contrast(1.2)}
}

/* captions sit on photographs, so they stay light on this palette too */
body.theme-white .frame .cap .mono{color:rgba(245,242,240,.9);text-shadow:0 1px 10px rgba(0,0,0,.5)}