/* ══════════════════════════════════════════════════════════
   CFN "New Look" — a refinement layer over style.css.
   Everything here is scoped to html.cfn-modern, so removing that
   class (the Classic toggle in the nav) restores the original
   design exactly. Nothing in style.css is removed or overridden
   outside that scope. Halloween colours still flow through the
   --gold / --ink variables, and the candy buttons are left alone.
   ══════════════════════════════════════════════════════════ */

/* ---------- look toggle (styled in both modes) ---------- */
.cfn-look-li{display:flex;align-items:center}
.cfn-look-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:30px;min-width:30px;padding:0 9px;margin-left:4px;
  background:0 0;border:1px solid rgba(var(--gold-rgb),.25);color:var(--gold2);font:600 11px/1 'DM Sans',sans-serif;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.cfn-look-btn:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),.08)}
.cfn-look-btn svg{width:15px;height:15px;flex-shrink:0}
.cfn-look-btn .cfn-look-txt{display:none}
.nav-links.open .cfn-look-btn{height:auto;padding:12px 22px;font-size:13px;letter-spacing:3px}
.nav-links.open .cfn-look-btn .cfn-look-txt{display:inline}

html.cfn-modern{
  --m-r:18px;--m-r-sm:12px;
  --m-surface:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  --m-line:rgba(255,255,255,.08);
  --m-line-hi:rgba(var(--gold-rgb),.38);
  --m-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 50px -18px rgba(0,0,0,.7);
  --m-shadow-hi:0 1px 0 rgba(255,255,255,.06) inset,0 26px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(var(--gold-rgb),.18);
  --m-ease:cubic-bezier(.2,.8,.2,1);
  scroll-behavior:smooth;scrollbar-color:rgba(var(--gold-rgb),.45) transparent;scrollbar-width:thin;
}
html.cfn-modern body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.cfn-modern ::selection{background:rgba(var(--gold-rgb),.35);color:#fff}
html.cfn-modern :focus-visible{outline:2px solid var(--gold2);outline-offset:3px;border-radius:8px}

/* ---------- floating glass navigation ---------- */
html.cfn-modern #nav{top:calc(var(--banner-h,0px) + 12px);left:16px;right:16px;max-width:1280px;margin:0 auto;height:62px;padding:0 10px 0 22px;border-radius:999px;
  background:transparent;border:1px solid var(--m-line);box-shadow:0 12px 40px -12px rgba(0,0,0,.65)}
html.cfn-modern #nav::before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:rgba(14,13,11,.62);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
html.cfn-modern #nav.bg{background:transparent;border-bottom:1px solid var(--m-line);-webkit-backdrop-filter:none;backdrop-filter:none}
html.cfn-modern #nav.bg::before{background:rgba(10,10,9,.82)}
html.cfn-modern .nav-links{gap:2px;align-items:center}
html.cfn-modern .nav-links li a{padding:8px 14px;border:0;border-radius:999px;font-size:11px;letter-spacing:1.6px;color:rgba(240,235,224,.66);transition:color .2s,background .2s}
html.cfn-modern .nav-links li a:hover{color:var(--white);background:rgba(255,255,255,.06)}
html.cfn-modern .nav-links li a.active{color:var(--ink);background:linear-gradient(135deg,var(--gold2),var(--gold));font-weight:600}
html.cfn-modern .nav-sub{border:0;border-radius:999px;padding:11px 20px;color:var(--ink);background:linear-gradient(135deg,var(--gold2),var(--gold) 60%,var(--gold3));box-shadow:0 6px 20px -6px rgba(var(--gold-rgb),.6);letter-spacing:1.8px}
html.cfn-modern .nav-sub:hover{transform:translateY(-1px);box-shadow:0 10px 26px -6px rgba(var(--gold-rgb),.75)}
html.cfn-modern .cfn-look-btn{border-radius:999px;border-color:var(--m-line);color:rgba(240,235,224,.75);height:34px;min-width:34px}
html.cfn-modern .cfn-look-btn:hover{color:var(--gold2);border-color:var(--m-line-hi);background:rgba(var(--gold-rgb),.08)}
html.cfn-modern .nav-account-summary{border-radius:999px}
html.cfn-modern .nav-account-dropdown{border-radius:var(--m-r-sm);overflow:hidden}
html.cfn-modern .ham{padding:10px;margin-right:4px;border-radius:999px}
html.cfn-modern .ham span{border-radius:2px}
html.cfn-modern .nav-links.open{border-radius:0;background:rgba(8,8,8,.96)}
html.cfn-modern .nav-links.open li a{font-size:18px;letter-spacing:2.5px;padding:12px 26px}
/* page headers clear the floating bar */
html.cfn-modern .page-header{padding-top:calc(96px + var(--banner-h,0px))}

/* ---------- typography ---------- */
html.cfn-modern .hero-eyebrow,html.cfn-modern .ph-eyebrow,html.cfn-modern .label,html.cfn-modern .films-label,html.cfn-modern .ts-eyebrow,html.cfn-modern .actors-eyebrow,html.cfn-modern .fn-head{font-size:11px;letter-spacing:3.2px}
html.cfn-modern .hero-eyebrow,html.cfn-modern .ph-eyebrow{display:flex;width:fit-content;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(var(--gold-rgb),.08);border:1px solid rgba(var(--gold-rgb),.2)}
html.cfn-modern .hero-eyebrow::before,html.cfn-modern .ph-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
html.cfn-modern .hero-p,html.cfn-modern .ph-sub{font-size:17px;line-height:1.75;color:rgba(240,235,224,.72)}
html.cfn-modern .about-para,html.cfn-modern .featured-desc,html.cfn-modern .si-desc,html.cfn-modern .di-desc,html.cfn-modern .founder-bio,html.cfn-modern .pillar-text,html.cfn-modern .rc-desc,html.cfn-modern .uc-desc,html.cfn-modern .cb-p,html.cfn-modern .policy-text{color:rgba(240,235,224,.7);line-height:1.8}
html.cfn-modern .hero-h1,html.cfn-modern .ph-title{letter-spacing:-.01em}
html.cfn-modern .ph-title .t2,html.cfn-modern .hero-h1 .line2{background-size:200% 200%;animation:cfnMShine 9s ease-in-out infinite}
@keyframes cfnMShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- hero & page headers ---------- */
html.cfn-modern .hero-eyebrow{margin-left:auto;margin-right:auto}
html.cfn-modern .hero-logo-mark{display:block;margin-left:auto;margin-right:auto}
html.cfn-modern .hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%,rgba(var(--gold-rgb),.14),transparent 70%),radial-gradient(40% 30% at 50% 100%,rgba(var(--gold-rgb),.08),transparent 70%)}
html.cfn-modern .hero-inner{position:relative;z-index:2}
html.cfn-modern .hero-ctas{gap:14px}
html.cfn-modern .page-header{background:radial-gradient(70% 120% at 15% 0%,rgba(var(--gold-rgb),.1),transparent 60%),linear-gradient(180deg,var(--ink2) 0,var(--ink) 100%);border-bottom-color:var(--m-line)}

/* ---------- buttons (candy Halloween buttons are left untouched) ---------- */
html.cfn-modern body:not(.halloween-mode) .btn-gold{clip-path:none;border-radius:999px;padding:16px 34px;letter-spacing:2.2px;color:var(--ink);
  background:linear-gradient(135deg,var(--gold2),var(--gold) 55%,var(--gold3));box-shadow:0 10px 30px -10px rgba(var(--gold-rgb),.7),0 1px 0 rgba(255,255,255,.35) inset;transition:transform .25s var(--m-ease),box-shadow .25s,filter .25s}
html.cfn-modern body:not(.halloween-mode) .btn-gold:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 16px 36px -10px rgba(var(--gold-rgb),.85),0 1px 0 rgba(255,255,255,.35) inset}
html.cfn-modern body:not(.halloween-mode) .btn-gold:active{transform:translateY(0)}
html.cfn-modern .btn-line{border-radius:999px;padding:16px 32px;letter-spacing:2.2px;border-color:rgba(255,255,255,.16);color:var(--white);background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.cfn-modern .btn-line:hover{border-color:var(--m-line-hi);background:rgba(var(--gold-rgb),.1);transform:translateY(-2px)}
html.cfn-modern body:not(.halloween-mode) .watch-btn,html.cfn-modern body:not(.halloween-mode) .post-btn,html.cfn-modern body:not(.halloween-mode) .pill,html.cfn-modern body:not(.halloween-mode) .fb-login-btn,html.cfn-modern body:not(.halloween-mode) .fb-post-btn,html.cfn-modern body:not(.halloween-mode) .lrm-btn-primary,html.cfn-modern body:not(.halloween-mode) .edit-save-btn,html.cfn-modern body:not(.halloween-mode) .reply-btn,html.cfn-modern body:not(.halloween-mode) .po-btn{border-radius:999px;clip-path:none}
html.cfn-modern .tc-watch-btn,html.cfn-modern .founder-channel,html.cfn-modern .creation-subscribe,html.cfn-modern .lrm-btn-secondary,html.cfn-modern .edit-cancel-btn,html.cfn-modern .reply-cancel,html.cfn-modern .img-upload-btn,html.cfn-modern .fb-type-btn,html.cfn-modern .auto-edit-btn,html.cfn-modern .nf-sug-link{border-radius:999px}
html.cfn-modern .ctag,html.cfn-modern .ff{border-radius:999px;padding:7px 15px;letter-spacing:1.6px;font-size:10px}
html.cfn-modern .ff.active{background:rgba(var(--gold-rgb),.12);border-color:rgba(var(--gold-rgb),.35);color:var(--gold2)}

/* ---------- cards ---------- */
html.cfn-modern :is(.pillar,.founder-card,.reach-card,.teaser-card,.uc-card,.actor-card,.credits-card,.stat-box,.film-showcase,.compose-box,.post-card,.creation-card,.connect-banner,.cs-cell,.inv-perk,.feed-bar){
  border-radius:var(--m-r);border:1px solid var(--m-line);background:var(--m-surface),var(--ink2);box-shadow:var(--m-shadow);
  transition:transform .35s var(--m-ease),border-color .3s,box-shadow .35s,background .3s}
html.cfn-modern :is(.pillar,.founder-card,.reach-card,.teaser-card,.uc-card,.actor-card,.creation-card,.stat-box,.film-showcase):hover{transform:translateY(-4px);border-color:var(--m-line-hi);box-shadow:var(--m-shadow-hi)}
html.cfn-modern .post-card:hover{border-color:rgba(var(--gold-rgb),.22)}
html.cfn-modern .compose-box{border-color:rgba(var(--gold-rgb),.2)}
html.cfn-modern .connect-banner{background:radial-gradient(80% 140% at 50% 0%,rgba(var(--gold-rgb),.14),transparent 70%),var(--ink2)}
html.cfn-modern .post-card.is-reply{border-radius:var(--m-r-sm)}
/* grids that used 1–2px gold "gap lines" become spaced cards */
html.cfn-modern .stats-row{gap:16px;background:transparent;border:0;padding:64px 56px}
html.cfn-modern .founders-grid{gap:20px;background:transparent;border:0}
html.cfn-modern .community-stats{gap:16px;background:transparent;border:0}
html.cfn-modern .compose-box button,html.cfn-modern .fb-bar-login-btns button,html.cfn-modern .feed-bar button{border-radius:999px}
html.cfn-modern .pillars{gap:18px}
html.cfn-modern .pillar-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.18)}
html.cfn-modern .stat-n{letter-spacing:-.02em}

/* ---------- media ---------- */
html.cfn-modern :is(.tc-thumb,.film-frame-inner,.detail-poster,.uc-poster,.showcase-poster,.ss-img-box,.actor-photo,.post-img,.creation-thumb,.announcement-image){border-radius:var(--m-r-sm);overflow:hidden}
html.cfn-modern .teaser-card .tc-thumb,html.cfn-modern .uc-card .uc-poster,html.cfn-modern .actor-card .actor-photo,html.cfn-modern .creation-card .creation-thumb{border-radius:0}
html.cfn-modern .film-frame-inner,html.cfn-modern .detail-poster{box-shadow:0 30px 70px -25px rgba(0,0,0,.85),0 0 0 1px var(--m-line)}
html.cfn-modern .tc-thumb img,html.cfn-modern .uc-poster img,html.cfn-modern .actor-photo img,html.cfn-modern .film-frame-inner img{transition:transform .6s var(--m-ease)}
html.cfn-modern .teaser-card:hover .tc-thumb img,html.cfn-modern .uc-card:hover .uc-poster img,html.cfn-modern .actor-card:hover .actor-photo img,html.cfn-modern .featured-visual:hover .film-frame-inner img{transform:scale(1.04)}
html.cfn-modern .founder-avatar,html.cfn-modern .credit-avatar{box-shadow:0 0 0 2px rgba(var(--gold-rgb),.35),0 10px 30px -10px rgba(0,0,0,.8)}
html.cfn-modern .tc-badge,html.cfn-modern .dh-tag,html.cfn-modern .si-tag,html.cfn-modern .trailer-note{border-radius:999px}

/* ---------- forms ---------- */
html.cfn-modern :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select){border-radius:var(--m-r-sm)}
html.cfn-modern :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select):focus{border-color:var(--m-line-hi)!important;box-shadow:0 0 0 4px rgba(var(--gold-rgb),.12)}

/* ---------- bands & footer ---------- */
html.cfn-modern .ticker-wrap{background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.07),transparent);border-color:var(--m-line)}
html.cfn-modern .marquee-section{border-top-color:var(--m-line)}
html.cfn-modern footer,html.cfn-modern #site-footer{position:relative;border-top:0;background:radial-gradient(60% 100% at 50% 0%,rgba(var(--gold-rgb),.06),transparent 70%),var(--ink2)}
html.cfn-modern #site-footer::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.45),transparent)}
html.cfn-modern .fn-links a{display:inline-block;transition:color .2s,transform .2s}
html.cfn-modern .fn-links a:hover{color:var(--gold2);transform:translateX(3px)}
html.cfn-modern .site-banner{border-radius:0}

/* ---------- small screens ---------- */
@media(max-width:900px){
  html.cfn-modern #nav{left:10px;right:10px;top:calc(var(--banner-h,0px) + 10px);height:56px;padding:0 6px 0 16px}
  html.cfn-modern .page-header{padding-top:calc(84px + var(--banner-h,0px))}
  html.cfn-modern .stats-row{padding:40px 20px;gap:12px}
  html.cfn-modern .hero-p{font-size:16px}
  html.cfn-modern body:not(.halloween-mode) .btn-gold,html.cfn-modern .btn-line{padding:15px 28px}
}
@media(prefers-reduced-motion:reduce){
  html.cfn-modern{scroll-behavior:auto}
  html.cfn-modern .ph-title .t2,html.cfn-modern .hero-h1 .line2{animation:none}
  html.cfn-modern *{transition-duration:.01ms!important}
}

/* Halloween + new look: keep the floating bar visible */
html.cfn-modern body.halloween-mode #nav{border:1px solid rgba(255,140,0,.28)!important;box-shadow:0 12px 40px -12px rgba(0,0,0,.7),0 0 24px -8px rgba(255,122,0,.35)}