/* ============ BBF TV — shared site styles ============ */
:root{
  --navy: #1C195C;
  --navy-deep: #100E3D;
  --navy-mid: #2A2678;
  --gold: #A37D2C;
  --gold-light: #C9A54D;
  --gold-pale: #EDE0C2;
  --paper: #FBFAF6;
  --paper-dim: #F2EFE7;
  --ink: #16142A;
  --ink-soft: rgba(22,20,42,0.62);
  --line: rgba(28,25,92,0.14);
  --shadow: 0 20px 50px -25px rgba(16,14,61,0.45);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:500;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}

/* ---------- STICKY TOP (header + trending stay while scrolling) ---------- */
.top-sticky{
  position:sticky;
  top:0;
  z-index:200;
  background:var(--paper);
}
#preloader{display:none !important;}

/* ---------- HEADER ---------- */
header{
  position:relative;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
}
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{width:44px; height:38px; flex-shrink:0; border-radius:8px; object-fit:cover;}
.logo-text{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:22px;
  line-height:1;
  color:var(--navy);
  letter-spacing:-0.01em;
}
.logo-text span{color:var(--gold);}
.logo-sub{
  font-family:'IBM Plex Mono', monospace;
  font-size:9.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:1px;
}

nav.menu{display:flex; align-items:center; gap:2px;}
nav.menu a{
  font-size:14px; font-weight:600;
  padding:10px 16px;
  border-radius:100px;
  color:var(--navy);
  position:relative;
  transition:background 0.2s ease, color 0.2s ease;
}
nav.menu a:hover{background:var(--gold-pale); color:var(--navy);}
nav.menu a.active{background:var(--navy); color:var(--paper);}

.menu-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:10px;
  border:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
}
.menu-toggle span{width:20px; height:2px; background:var(--navy); display:block; transition:0.25s;}
.menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- TICKER ---------- */
.ticker-bar{
  background:var(--navy);
  display:flex; align-items:stretch;
  overflow:hidden;
  border-bottom:2px solid var(--gold);
}
.ticker-label{
  flex-shrink:0;
  background:var(--gold);
  color:var(--navy);
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  display:flex; align-items:center;
  gap:8px;
  padding:9px 18px;
}
.ticker-label .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--navy);
  animation:pulse 1.6s infinite ease-in-out;
}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.25;}}
.ticker-track-wrap{
  flex:1; overflow:hidden; position:relative;
  display:flex; align-items:center;
}
.ticker-track{
  display:flex; gap:48px;
  white-space:nowrap;
  animation:scroll-ticker 32s linear infinite;
  padding-left:100%;
}
.ticker-track-wrap:hover .ticker-track{animation-play-state:paused;}
@keyframes scroll-ticker{
  from{transform:translateX(0);}
  to{transform:translateX(-100%);}
}
.ticker-track span{
  color:var(--paper);
  font-size:13px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.ticker-track span::before{content:"●"; color:var(--gold); font-size:8px;}

/* ---------- HERO (home) ---------- */
.hero{
  position:relative;
  background:linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%);
  color:var(--paper);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 4px);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  width:640px; height:640px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(163,125,44,0.35) 0%, transparent 70%);
  top:-220px; right:-160px;
  pointer-events:none;
}
.hero-wrap{
  max-width:1240px; margin:0 auto;
  padding:76px 28px 88px;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:48px;
  align-items:center;
  position:relative; z-index:2;
}
.hero-eyebrow{
  color:var(--gold-light);
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:22px;
}
.hero-eyebrow::before{content:""; width:26px; height:1px; background:var(--gold-light);}
h1.hero-title{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:clamp(34px, 4.6vw, 58px);
  line-height:1.04;
  letter-spacing:-0.015em;
  max-width:620px;
}
h1.hero-title em{font-style:italic; font-weight:500; color:var(--gold-light);}
.hero-desc{
  margin-top:22px;
  font-size:16.5px;
  line-height:1.65;
  color:rgba(251,250,246,0.78);
  max-width:480px;
}
.hero-ctas{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  font-family:'Manrope', sans-serif;
  font-weight:700;
  font-size:14px;
  padding:14px 26px;
  border-radius:100px;
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-gold{background:var(--gold); color:var(--navy-deep);}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(163,125,44,0.6);}
.btn-outline{border-color:rgba(251,250,246,0.35); color:var(--paper);}
.btn-outline:hover{background:rgba(251,250,246,0.1); transform:translateY(-2px);}
.btn-outline-dark{border-color:var(--navy); color:var(--navy);}
.btn-outline-dark:hover{background:var(--navy); color:var(--paper); transform:translateY(-2px);}

.hero-badge-wrap{display:flex; justify-content:center; align-items:center; position:relative;}
.badge-ring{
  width:min(320px, 80%);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 60%);
  border:1px solid rgba(251,250,246,0.18);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.badge-ring::before{
  content:"";
  position:absolute; inset:-18px;
  border-radius:50%;
  border:1px dashed rgba(201,165,77,0.4);
}
.badge-ring img{
  width:78%;
  height:78%;
  object-fit:cover;
  border-radius:50%;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,0.35));
  transition:opacity 0.8s ease;
}
.badge-ring img.fade-out{opacity:0;}
.badge-caption{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  background:var(--gold);
  color:var(--navy-deep);
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:600;
  padding:7px 16px;
  border-radius:100px;
  white-space:nowrap;
}

/* ---------- PAGE HEADER BANNER (inner pages) ---------- */
.page-banner{
  position:relative;
  background:linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%);
  color:var(--paper);
  overflow:hidden;
  padding:64px 28px 72px;
}
.page-banner::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 4px);
  pointer-events:none;
}
.page-banner::after{
  content:"";
  position:absolute;
  width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(163,125,44,0.3) 0%, transparent 70%);
  top:-200px; right:-140px;
  pointer-events:none;
}
.page-banner-wrap{
  max-width:1240px; margin:0 auto;
  position:relative; z-index:2;
  text-align:center;
}
.page-banner h1{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:clamp(32px, 5vw, 50px);
  letter-spacing:-0.015em;
  margin-top:16px;
}
.page-banner p{
  margin-top:14px;
  font-size:15.5px;
  color:rgba(251,250,246,0.72);
  max-width:520px;
  margin-left:auto; margin-right:auto;
}

/* ---------- SECTION HEADS ---------- */
.section{max-width:1240px; margin:0 auto; padding:80px 28px;}
.section-narrow{max-width:880px;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:40px; flex-wrap:wrap;
}
.section-eyebrow{color:var(--gold);}
h2.section-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(26px, 3.2vw, 38px);
  color:var(--navy);
  margin-top:8px;
  letter-spacing:-0.01em;
}
.rail-controls{display:flex; gap:10px;}
.rail-btn{
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--navy);
  background:var(--paper);
  color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.rail-btn:hover{background:var(--navy); color:var(--paper);}
.rail-btn:active{transform:scale(0.92);}
.rail-btn svg{width:18px; height:18px;}

/* ---------- BLOG RAIL ---------- */
.rail-viewport{overflow:hidden;}
.rail{
  display:flex; gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none;}
.post-card{
  flex:0 0 auto;
  width:260px;
  scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.post-card:hover{transform:translateY(-6px);}
.post-thumb{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-dim);}
.post-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post-tag{color:var(--gold); font-weight:600;}
.post-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:17px;
  line-height:1.32;
  color:var(--navy);
}
.post-meta{font-size:12px; color:var(--ink-soft); font-weight:600;}
.post-read{
  margin-top:auto; padding-top:6px;
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--navy);
}
.post-read svg{width:14px; height:14px; transition:transform 0.2s ease;}
.post-card:hover .post-read svg{transform:translateX(4px);}

/* ---------- PILLARS ---------- */
.pillars{background:var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.pillars-wrap{
  max-width:1240px; margin:0 auto; padding:52px 28px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
}
.pillar{display:flex; gap:16px; align-items:flex-start;}
.pillar-num{
  font-family:'IBM Plex Mono', monospace;
  color:var(--gold); font-weight:600; font-size:13px;
  border:1px solid var(--gold); border-radius:50%;
  width:34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.pillar h3{font-family:'Fraunces', serif; color:var(--navy); font-size:18px; margin-bottom:6px;}
.pillar p{font-size:13.5px; color:var(--ink-soft); line-height:1.55;}

/* ---------- GENERIC CONTENT BLOCKS ---------- */
.prose p{font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:18px;}
.prose p:last-child{margin-bottom:0;}
.lede{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:22px;
  line-height:1.5;
  color:var(--navy);
  margin-bottom:28px;
}

.stat-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  margin:36px 0;
}
.stat-cell{background:#fff; padding:26px 20px; text-align:center;}
.stat-num{font-family:'Fraunces', serif; font-weight:700; font-size:30px; color:var(--navy);}
.stat-label{font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); font-family:'IBM Plex Mono', monospace; margin-top:6px;}

.value-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-top:36px;}
.value-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:26px; box-shadow:var(--shadow);
}
.value-card .eyebrow{color:var(--gold);}
.value-card h3{font-family:'Fraunces', serif; color:var(--navy); font-size:19px; margin:8px 0 8px;}
.value-card p{font-size:14px; line-height:1.6; color:var(--ink-soft);}

.cta-band{
  background:var(--navy);
  border-radius:22px;
  padding:48px;
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
  color:var(--paper);
}
.cta-band h3{font-family:'Fraunces', serif; font-size:26px; margin-bottom:8px;}
.cta-band p{color:rgba(251,250,246,0.7); font-size:14.5px; max-width:420px;}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-deep); color:rgba(251,250,246,0.75);}
.footer-wrap{
  max-width:1240px; margin:0 auto; padding:56px 28px 32px;
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.footer-brand .logo-text{color:var(--paper);}
.footer-brand p{margin-top:14px; font-size:13.5px; max-width:280px; line-height:1.6; color:rgba(251,250,246,0.55);}
.footer-links{display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h4{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold-light); margin-bottom:14px;
}
.footer-col a{display:block; font-size:13.5px; padding:5px 0; color:rgba(251,250,246,0.75); transition:color 0.2s;}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{
  border-top:1px solid rgba(251,250,246,0.12);
  max-width:1240px; margin:0 auto; padding:22px 28px;
  display:flex; justify-content:space-between; font-size:12px; color:rgba(251,250,246,0.45);
  flex-wrap:wrap; gap:10px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .hero-wrap{grid-template-columns:1fr; padding-top:52px;}
  .hero-badge-wrap{order:-1;}
  .badge-ring{width:220px; margin-bottom:12px;}
  .pillars-wrap{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:1fr;}
}
@media (max-width:760px){
  nav.menu{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper);
    flex-direction:column; align-items:stretch;
    padding:10px 20px 20px;
    border-bottom:1px solid var(--line);
    display:none;
    gap:4px;
  }
  nav.menu.open{display:flex;}
  nav.menu a{padding:12px 14px; border-radius:10px;}
  .menu-toggle{display:flex;}
  .section{padding:56px 20px;}
  .post-card{width:220px;}
  .cta-band{padding:32px; flex-direction:column; align-items:flex-start;}
}