/* ============================================================
   cine.css — cinematic skin for classic pages (load AFTER site.css)
   Applies the new homepage design language without touching content.
   ============================================================ */

/* --- typography scale-up --- */
.h{font-weight:800;letter-spacing:-.03em;line-height:.98}
.hc{font-weight:800}
.phero{padding:19vh 0 8vh;text-align:center}
.phero .wrap>*{margin-left:auto;margin-right:auto}
.phero h1{font-size:clamp(40px,6.4vw,96px);max-width:1050px}
.phero .sub{font-size:16.5px;max-width:600px}
.eyebrow{color:var(--gold);font-weight:600;font-size:10.5px;letter-spacing:1.6px;font-variant-numeric:tabular-nums}

/* --- nav: fixed, transparent over hero, frosted on scroll --- */
.nav{position:fixed;left:0;right:0;top:0;z-index:80;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
.nav.scrolled{background:rgba(244,241,234,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{padding-top:14px;padding-bottom:14px}
.nav .btn{padding:11px 22px;font-size:13.5px}

/* --- buttons --- */
.btn{font-size:15px;padding:15px 30px;border-radius:34px}

/* --- frames: drop the navy device border, go soft-shadow --- */
.frame{border:1px solid var(--line);background:transparent;border-radius:14px;box-shadow:0 24px 70px rgba(10,20,38,.13);cursor:zoom-in;transition:box-shadow .4s ease}
.frame:hover{box-shadow:0 30px 84px rgba(10,20,38,.2)}
.frame.kb img{animation:none}

/* --- cards: bump presence --- */
.card{border-top:none;position:relative;padding-top:14px}
.card::before{content:'';position:absolute;top:0;left:0;width:44px;height:3px;background:var(--gold)}
.card h3{font-size:22px}
.card p{font-size:14px;line-height:1.55}

/* --- section rhythm --- */
section{padding:9vh 0}
.cta{text-align:center}
.cta .h{font-size:clamp(38px,6.4vw,92px)}
.cta p{max-width:440px;margin:18px auto 26px;color:var(--mut)}

/* --- cursor --- */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:999;border-radius:50%;transform:translate(-50%,-50%)}
.cur-dot{width:7px;height:7px;background:var(--gold)}
.cur-ring{width:34px;height:34px;border:1.5px solid rgba(184,144,42,.55);transition:width .18s,height .18s,border-color .18s}
body.cur-hover .cur-ring{width:52px;height:52px;border-color:var(--gold)}
@media(hover:none){.cur-dot,.cur-ring{display:none}}

/* --- HUD (bottom corners) --- */
.hud{position:fixed;inset:0;pointer-events:none;z-index:60;color:var(--mut);font-variant-numeric:tabular-nums;letter-spacing:1.6px;font-size:10.5px;font-weight:600;text-transform:uppercase}
.hud .bl{position:absolute;bottom:14px;left:20px}
.hud .br{position:absolute;bottom:14px;right:20px;text-align:right}
.hud .prog{display:inline-block;width:70px;height:2px;background:var(--line);vertical-align:middle;margin-left:8px;position:relative}
.hud .prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold)}

/* --- lightbox --- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,20,38,.93);display:none;align-items:center;justify-content:center;padding:4vh 4vw;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;width:auto;height:auto;border-radius:10px;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.lightbox .lbcap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#C9CFDA;font-size:13px}

/* anchor offset under fixed nav */
[id]{scroll-margin-top:96px}

@media(max-width:860px){
  .hud .br{display:none}
  .phero{padding:15vh 0 7vh}
}
@media(prefers-reduced-motion:reduce){
  .cur-dot,.cur-ring{display:none}
}