/* ============================================================
   TITANS MARKET INTELLIGENCE — theme.css
   Shared stylesheet for the static site and the WordPress theme.
   Brand: Red #D32F2F · Black #1A1A1A · White #FFFFFF
   Green #2ECC71 reserved ONLY for the positive market arrow.
   Fonts: Archivo (display/body) · IBM Plex Mono (meta/stats/ticker)
   ============================================================ */

:root{
  --bg:#0E0E0E; --bg-2:#141414; --card:#1A1A1A; --card-2:#1F1F1F;
  --border:#2A2A2A; --border-2:#363636;
  --text:#F4F4F4; --text-dim:#A0A0A0; --text-mute:#6E6E6E;
  --red:#D32F2F; --red-deep:#BF2424; --red-bright:#E03434; --green:#2ECC71;
  --sans:'Archivo',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1320px; --rhythm:24px;
}
[data-theme="light"]{
  --bg:#F5F5F5; --bg-2:#FFFFFF; --card:#FFFFFF; --card-2:#FAFAFA;
  --border:#E4E4E4; --border-2:#D6D6D6;
  --text:#1A1A1A; --text-dim:#555555; --text-mute:#8A8A8A;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--red); color:#fff;}

/* ---------- utility bar ---------- */
.util{background:var(--bg-2); border-bottom:1px solid var(--border); font-family:var(--mono);}
.util-in{max-width:var(--wrap); margin:0 auto; padding:0 24px; height:38px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;}
.util-l{display:flex; align-items:center; gap:18px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute);}
.util-l .edt{color:var(--red); font-weight:600;}
.util-r{display:flex; align-items:center; gap:6px;}
.util-btn{background:none; border:1px solid var(--border-2); color:var(--text-dim);
  width:30px; height:30px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center;
  transition:.15s; padding:0;}
.util-btn:hover{border-color:var(--red); color:var(--text);}
.util-btn svg{width:15px; height:15px;}

/* ---------- masthead ---------- */
.masthead{background:var(--bg); border-bottom:3px solid var(--red);}
.mast-in{max-width:var(--wrap); margin:0 auto; padding:22px 24px; display:flex; align-items:center; gap:18px;}
.mast-mark{width:46px; height:auto; flex:none;}
.mast-word{display:flex; flex-direction:column; gap:3px;}
.mast-word h1{font-size:30px; font-weight:900; letter-spacing:-.02em; margin:0; line-height:1; text-transform:uppercase;}
.mast-word .sub{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim);}
.mast-spacer{margin-left:auto;}
.mast-cta{display:inline-flex; align-items:center; gap:9px; background:var(--red); color:#fff;
  font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 18px; border-radius:5px; border:0; transition:.15s;}
.mast-cta:hover{background:var(--red-deep);}
.mast-cta svg{width:15px;height:15px;}

/* ---------- ticker ---------- */
.ticker{background:#1A1A1A; border-bottom:1px solid var(--border); overflow:hidden; position:sticky; top:0; z-index:60;}
[data-theme="light"] .ticker{background:#1A1A1A;}
.ticker-row{display:flex; align-items:center;}
.ticker-tag{flex:none; background:var(--red); color:#fff; font-family:var(--mono); font-weight:700;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:11px 16px; z-index:2;
  display:flex; align-items:center; gap:8px;}
.ticker-tag .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.ticker-vp{overflow:hidden; flex:1;}
.ticker-track{display:inline-flex; white-space:nowrap; will-change:transform; animation:scroll 48s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.tk{display:inline-flex; align-items:baseline; gap:8px; padding:11px 22px; font-family:var(--mono); font-size:12.5px; color:#cfcfcf; border-right:1px solid #2A2A2A;}
.tk .k{color:#8A8A8A; letter-spacing:.08em; text-transform:uppercase; font-size:11px;}
.tk .v{color:#fff; font-weight:600;}
.tk .up{color:var(--green); font-weight:700;}
.tk .down{color:var(--red-bright); font-weight:700;}
.tk .flat{color:#8A8A8A;}

/* ---------- nav ---------- */
.nav{background:var(--bg-2); border-bottom:1px solid var(--border); position:sticky; top:40px; z-index:55;}
.nav-in{max-width:var(--wrap); margin:0 auto; padding:0 14px; display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none;}
.nav-in::-webkit-scrollbar{display:none;}
.nav-tab{flex:none; background:none; border:0; color:var(--text-dim); font-family:var(--mono); font-weight:600;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; padding:15px 16px; position:relative; white-space:nowrap; transition:.15s;}
.nav-tab:hover{color:var(--text);}
.nav-tab.active{color:var(--text);}
.nav-tab.active::after{content:""; position:absolute; left:16px; right:16px; bottom:0; height:3px; background:var(--red);}

/* ---------- layout shell ---------- */
.shell{max-width:var(--wrap); margin:0 auto; padding:40px 24px 80px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 26px; padding-bottom:14px; border-bottom:1px solid var(--border);}
.section-head h2{margin:0; font-size:15px; font-family:var(--mono); font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--text);}
.section-head h2 .accent{color:var(--red);}
.section-head .count{font-family:var(--mono); font-size:12px; color:var(--text-mute); letter-spacing:.08em;}

/* ---------- masonry grid (Pin style) ---------- */
.grid{column-count:3; column-gap:24px;}
.card{break-inside:avoid; margin:0 0 24px; background:var(--card); border:1px solid var(--border);
  border-radius:6px; overflow:hidden; transition:.18s; display:block;}
.card:hover{transform:translateY(-3px); border-color:var(--border-2); box-shadow:0 10px 30px rgba(0,0,0,.35);}
.card-img{position:relative; background:#1A1A1A; overflow:hidden;}
.card-img img{width:100%; height:auto; transition:.4s;}
.card:hover .card-img img{transform:scale(1.03);}
.card-body{padding:18px 18px 20px;}
.tagline{display:flex; align-items:center; gap:10px; margin-bottom:11px;}
.cat{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--red);}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);}
.card h3{margin:0 0 10px; font-size:21px; line-height:1.18; font-weight:800; letter-spacing:-.015em; color:var(--text); text-wrap:pretty;}
.card .dek{margin:0 0 14px; font-size:14.5px; line-height:1.55; color:var(--text-dim);}
.meta{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--text-mute); text-transform:uppercase;}
.meta .sep{width:3px;height:3px;border-radius:50%;background:var(--text-mute);}
/* lead emphasis: first card slightly larger title */
.card.lead h3{font-size:25px;}

/* ---------- newsletter block (sits inside grid) ---------- */
.signup{break-inside:avoid; margin:0 0 24px; background:linear-gradient(150deg,var(--red-bright),var(--red) 55%,var(--red-deep)); border-radius:6px; padding:26px 22px; color:#fff;}
.signup .ey{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#ffd9d9; margin-bottom:10px;}
.signup h3{margin:0 0 8px; font-size:23px; font-weight:900; letter-spacing:-.02em; line-height:1.1;}
.signup p{margin:0 0 16px; font-size:14px; line-height:1.5; color:#ffe9e9;}
.signup form{display:flex; flex-direction:column; gap:9px;}
.signup input{width:100%; padding:12px 14px; border:0; border-radius:5px; font-family:var(--mono); font-size:13px; background:rgba(255,255,255,.95); color:#1A1A1A;}
.signup button{padding:12px 14px; border:0; border-radius:5px; background:#1A1A1A; color:#fff; font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; transition:.15s;}
.signup button:hover{background:#000;}
.signup .ok{font-family:var(--mono); font-size:12px; color:#fff; margin-top:6px;}

/* ---------- article ---------- */
.progress{position:fixed; top:0; left:0; height:3px; background:var(--red); width:0; z-index:100;}
.article{max-width:760px; margin:0 auto; padding:40px 24px 70px;}
.crumb{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-bottom:20px; display:flex; gap:8px; align-items:center;}
.crumb a:hover{color:var(--red);}
.article .cat{font-size:12px; margin-bottom:14px; display:inline-block;}
.article h1{font-size:42px; line-height:1.08; font-weight:900; letter-spacing:-.025em; margin:0 0 18px; text-wrap:balance;}
.article .standfirst{font-size:20px; line-height:1.5; color:var(--text-dim); margin:0 0 24px; font-weight:500;}
.byline{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:28px;}
.byline .who{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--text-dim); text-transform:uppercase;}
.byline .who b{color:var(--text);}
.share{display:flex; align-items:center; gap:8px;}
.share span{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);}
.share button{width:32px; height:32px; border-radius:5px; border:1px solid var(--border-2); background:none; color:var(--text-dim); display:inline-flex; align-items:center; justify-content:center; transition:.15s;}
.share button:hover{border-color:var(--red); color:var(--text);}
.share button svg{width:15px; height:15px;}
.article-hero{margin:0 0 10px; border:1px solid var(--border); border-radius:6px; overflow:hidden;}
.article-hero figcaption{font-family:var(--mono); font-size:11px; color:var(--text-mute); padding:10px 2px 0; letter-spacing:.04em;}

.statband{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--border); border-radius:6px; margin:26px 0 30px; overflow:hidden; background:var(--card);}
.statband .s{flex:1; min-width:140px; padding:18px 20px; border-right:1px solid var(--border);}
.statband .s:last-child{border-right:0;}
.statband .s .n{font-size:30px; font-weight:900; letter-spacing:-.02em; color:var(--text); line-height:1;}
.statband .s .l{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute); margin-top:8px;}

.body-copy{font-size:18px; line-height:1.72; color:var(--text);}
.body-copy p{margin:0 0 22px;}
.body-copy h2{font-size:25px; font-weight:800; letter-spacing:-.015em; margin:38px 0 14px; line-height:1.2;}
.body-copy .pull{margin:30px 0; padding:6px 0 6px 24px; border-left:4px solid var(--red); font-size:23px; line-height:1.4; font-weight:700; letter-spacing:-.01em; color:var(--text); font-family:var(--sans);}

.report-cta{margin:40px 0 0; background:var(--card); border:1px solid var(--border); border-radius:6px; padding:28px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
.report-cta .rt{flex:1; min-width:220px;}
.report-cta h3{margin:0 0 6px; font-size:20px; font-weight:800;}
.report-cta p{margin:0; color:var(--text-dim); font-size:14px;}

/* ---------- related ---------- */
.related{max-width:var(--wrap); margin:0 auto; padding:0 24px 70px;}

/* ---------- back to top ---------- */
.totop{position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:6px; background:var(--red); color:#fff; border:0; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:translateY(10px); transition:.2s; z-index:70;}
.totop.show{opacity:1; pointer-events:auto; transform:none;}
.totop:hover{background:var(--red-deep);}
.totop svg{width:20px;height:20px;}

/* ---------- search overlay ---------- */
.search-ov{position:fixed; inset:0; background:rgba(8,8,8,.94); z-index:120; display:none; padding:80px 24px; overflow:auto;}
.search-ov.open{display:block;}
.search-in{max-width:760px; margin:0 auto;}
.search-in input{width:100%; background:none; border:0; border-bottom:2px solid var(--border-2); color:#fff; font-family:var(--sans); font-size:34px; font-weight:800; padding:10px 0; outline:none;}
.search-in input::placeholder{color:#555;}
.search-hint{font-family:var(--mono); font-size:12px; color:#777; margin-top:12px; letter-spacing:.08em; text-transform:uppercase;}
.search-results{margin-top:30px; display:flex; flex-direction:column; gap:2px;}
.sr{display:flex; gap:16px; padding:16px; border-radius:6px; transition:.15s; align-items:center;}
.sr:hover{background:#1A1A1A;}
.sr img{width:90px; height:60px; object-fit:cover; border-radius:4px; flex:none;}
.sr .srt{color:#fff; font-weight:700; font-size:16px; margin-bottom:5px;}
.sr .srm{font-family:var(--mono); font-size:11px; color:var(--red); letter-spacing:.1em; text-transform:uppercase;}
.search-close{position:absolute; top:24px; right:24px; background:none; border:1px solid #333; color:#aaa; width:40px; height:40px; border-radius:5px; font-size:18px;}

/* ---------- footer ---------- */
.foot{background:var(--bg-2); border-top:1px solid var(--border); margin-top:0;}
.foot-in{max-width:var(--wrap); margin:0 auto; padding:46px 24px;}
.foot-top{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between; padding-bottom:34px; border-bottom:1px solid var(--border);}
.foot-brand{max-width:340px;}
.foot-brand .fb-mark{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.foot-brand img{width:34px;}
.foot-brand .fb-name{font-weight:900; font-size:18px; text-transform:uppercase; letter-spacing:-.01em;}
.foot-brand p{color:var(--text-dim); font-size:13.5px; line-height:1.6; margin:0;}
.foot-cols{display:flex; gap:48px; flex-wrap:wrap;}
.foot-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin:0 0 14px;}
.foot-col a{display:block; color:var(--text-dim); font-size:13.5px; margin-bottom:9px; transition:.15s;}
.foot-col a:hover{color:var(--red);}
.foot-bottom{padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--text-mute); letter-spacing:.04em;}

/* ---------- featured strip (compact 16:9 editor picks) ---------- */
.feat{margin-bottom:38px;}
.feat-head{margin-bottom:18px;}
.feat-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
.feat-card{display:block; background:var(--card); border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:.18s;}
.feat-card:hover{transform:translateY(-2px); border-color:var(--border-2); box-shadow:0 8px 22px rgba(0,0,0,.3);}
.feat-img{aspect-ratio:16/9; background:#1A1A1A; overflow:hidden;}
.feat-img img{width:100%; height:100%; object-fit:cover; display:block; transition:.4s;}
.feat-card:hover .feat-img img{transform:scale(1.04);}
.feat-body{padding:10px 11px 12px;}
.feat-cat{font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red);}
.feat-card h4{margin:5px 0 0; font-size:13px; line-height:1.25; font-weight:700; color:var(--text); letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
@media(max-width:1024px){ .feat-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:640px){ .feat-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .grid{column-count:2;}
  .article h1{font-size:36px;}
}
@media(max-width:640px){
  .grid{column-count:1;}
  .mast-in{flex-wrap:wrap; gap:12px;}
  .mast-spacer{display:none;}
  .mast-cta{width:100%; justify-content:center; order:3;}
  .mast-word h1{font-size:24px;}
  .nav{top:0;}
  .article{padding:28px 20px 60px;}
  .article h1{font-size:29px;}
  .article .standfirst{font-size:17px;}
  .body-copy{font-size:17px;}
  .body-copy .pull{font-size:20px;}
  .util-l .ed-date{display:none;}
}