/* Evander Signal — shared shell.
   One stylesheet across the dashboard, the news feed and the daily report so
   the whole site reads as one publication rather than three apps. */

:root{
  --bg:#0b0e13; --panel:#121722; --panel-2:#0e1420; --line:#1e2634;
  --text:#e8e3d5; --dim:#8a93a6; --dimmer:#6b7385;
  --gold:#d4a939; --gold-hi:#f0c860;
  --buy:#3f9e63; --sell:#c1443f;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:16px/1.6 var(--sans);
     -webkit-font-smoothing:antialiased}
a{color:var(--gold-hi);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--line);background:rgba(11,14,19,.92);
          backdrop-filter:saturate(140%) blur(8px);position:sticky;top:0;z-index:50}
.masthead .wrap{display:flex;align-items:center;gap:22px;padding-top:14px;
                padding-bottom:14px;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:21px;font-weight:700;
       letter-spacing:-.01em;color:var(--text);white-space:nowrap}
.brand em{color:var(--gold);font-style:normal}
.brand a{color:inherit}
.brand a:hover{text-decoration:none}
.nav{display:flex;gap:20px;align-items:center;font-size:14px}
.nav a{color:var(--dim)}
.nav a:hover{color:var(--gold-hi);text-decoration:none}
.nav a.on{color:var(--text)}
.masthead .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.live{display:flex;align-items:center;gap:7px;color:var(--dim);font-size:12px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--buy);
     animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.labs{color:var(--dimmer);font-size:10.5px;letter-spacing:.16em;
      text-transform:uppercase}

/* ---------- generic surfaces ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
       padding:24px}
.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
         color:var(--dim);margin-bottom:14px}
.rule{height:1px;background:var(--line);margin:34px 0}

/* ---------- home hero ---------- */
.hero{display:grid;grid-template-columns:minmax(300px,1fr) 1.25fr minmax(280px,.85fr);
      gap:22px;align-items:stretch;padding:30px 0 6px}
.dial-card{display:flex;flex-direction:column;align-items:center;
           justify-content:center;text-align:center}
.dial-mount{width:100%}
.dial-meta{color:var(--dim);font-size:12.5px;margin-top:6px}
.dial-meta b{color:var(--text);font-weight:600}
.dial-stats{color:var(--dim);font-size:12.5px;margin-top:18px;
            padding-top:16px;border-top:1px solid var(--line);width:100%;
            text-align:center}
.dial-stats b{color:var(--text);font-weight:600}

/* ---------- weekly report column ---------- */
.column{background:linear-gradient(170deg,#191c25 0%,#12141c 55%,#0f1118 100%);
        border:1px solid #2c2a24;border-radius:14px;padding:26px 24px;
        display:flex;flex-direction:column;position:relative;overflow:hidden}
.column::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
                background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.column .kicker{font-family:var(--serif);font-size:12px;letter-spacing:.18em;
                text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.column h2{font-family:var(--serif);font-size:27px;line-height:1.2;
           font-weight:700;margin-bottom:12px;letter-spacing:-.015em}
.column p{color:var(--dim);font-size:14px;margin-bottom:16px}
.column ul{list-style:none;margin:0 0 20px;font-size:13.5px;color:var(--dim)}
.column li{padding-left:18px;position:relative;margin-bottom:7px}
.column li::before{content:"—";position:absolute;left:0;color:var(--gold)}
.signup{margin-top:auto}
.signup form{display:flex;gap:8px;flex-wrap:wrap}
.signup input[type=email]{flex:1;min-width:0;background:#080b11;
  border:1px solid var(--line);color:var(--text);border-radius:8px;
  padding:11px 13px;font-size:14px;font-family:inherit}
.signup input[type=email]:focus{outline:none;border-color:var(--gold)}
.signup button{background:var(--gold);color:#1a1408;border:none;border-radius:8px;
  padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;white-space:nowrap}
.signup button:hover{background:var(--gold-hi)}
.signup .small{color:var(--dimmer);font-size:11.5px;margin-top:9px}
.flash{border-radius:8px;padding:10px 13px;font-size:13px;margin-bottom:12px}
.flash.ok{background:rgba(63,158,99,.14);border:1px solid var(--buy);color:#a8e0bd}
.flash.err{background:rgba(193,68,63,.14);border:1px solid var(--sell);color:#f0b4b1}

/* ---------- channels ---------- */
.chan{display:flex;align-items:center;gap:12px;margin-bottom:11px;font-size:13.5px}
.chan .nm{width:172px;flex-shrink:0;color:var(--text)}
.chan .track{flex:1;height:8px;background:var(--panel-2);border-radius:5px;
             position:relative;overflow:hidden}
.chan .track::after{content:"";position:absolute;left:50%;top:0;bottom:0;
                    width:1px;background:#2b3445}
.chan .fill{position:absolute;top:0;bottom:0;border-radius:3px}
.chan .n{width:42px;text-align:right;color:var(--dim);font-size:12px;
         flex-shrink:0}

/* ---------- article cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
       gap:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;
      overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s}
.card:hover{border-color:#3a4356}
.card .thumb{aspect-ratio:16/9;background:#0a0d13;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:17px 18px 19px;display:flex;flex-direction:column;flex:1}
.card .tag{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
           color:var(--gold);margin-bottom:9px}
.card h3{font-family:var(--serif);font-size:18px;line-height:1.32;
         font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
.card h3 a{color:var(--text)}
.card h3 a:hover{color:var(--gold-hi);text-decoration:none}
.card p{color:var(--dim);font-size:13.5px;line-height:1.55;flex:1}
.card .foot{margin-top:13px;color:var(--dimmer);font-size:11.5px;
            display:flex;gap:10px}

/* ---------- article page ---------- */
.article{max-width:760px;margin:0 auto}
.article .kicker{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
                 color:var(--gold);margin-bottom:14px}
.article h1{font-family:var(--serif);font-size:clamp(28px,4.4vw,42px);
            line-height:1.16;font-weight:700;letter-spacing:-.02em;
            margin-bottom:18px}
.article .dek{font-size:19px;line-height:1.55;color:var(--dim);
              margin-bottom:22px;font-family:var(--serif)}
.article .byline{display:flex;gap:14px;align-items:center;color:var(--dimmer);
                 font-size:12.5px;padding-bottom:22px;
                 border-bottom:1px solid var(--line);margin-bottom:26px;
                 flex-wrap:wrap}
.hero-img{border-radius:13px;overflow:hidden;margin-bottom:28px}
.prose{font-size:17.5px;line-height:1.75}
.prose p{margin-bottom:20px}
.prose h2{font-family:var(--serif);font-size:25px;font-weight:700;
          margin:34px 0 14px;letter-spacing:-.015em}
.prose h3{font-size:19px;font-weight:700;margin:26px 0 10px}
.prose ul,.prose ol{margin:0 0 20px 22px}
.prose li{margin-bottom:8px}
.prose strong{color:#fff}
.prose blockquote{border-left:2px solid var(--gold);padding-left:18px;
                  color:var(--dim);margin:0 0 20px;font-style:italic}
.takeaways{background:var(--panel);border:1px solid var(--line);
           border-radius:13px;padding:22px 24px;margin:0 0 30px}
.takeaways ul{list-style:none;margin:0}
.takeaways li{padding-left:22px;position:relative;margin-bottom:11px;
              font-size:15px;line-height:1.55}
.takeaways li:last-child{margin-bottom:0}
.takeaways li::before{content:"";position:absolute;left:0;top:9px;width:9px;
                      height:9px;border-radius:2px;background:var(--gold);
                      transform:rotate(45deg)}

/* internal links get their own visual treatment, distinct from sources */
.related{margin:34px 0}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
              gap:14px}
.related a{display:block;background:var(--panel);border:1px solid var(--line);
           border-left:2px solid var(--gold);border-radius:9px;padding:15px 16px;
           color:var(--text);font-size:14.5px;line-height:1.4;font-weight:600}
.related a:hover{border-color:#3a4356;border-left-color:var(--gold-hi);
                 text-decoration:none}
.related a span{display:block;color:var(--dimmer);font-size:11.5px;
                font-weight:400;margin-top:6px}
/* external sources: plainer, clearly not our pages */
.sources{margin:30px 0 10px}
.sources ol{margin:0 0 0 20px;color:var(--dim);font-size:13.5px}
.sources li{margin-bottom:9px}
.sources a{color:var(--dim);text-decoration:underline;
           text-decoration-color:#39414f}
.sources a:hover{color:var(--gold-hi)}
.sources .lang{display:inline-block;font-size:9.5px;letter-spacing:.08em;
               border:1px solid var(--line);border-radius:3px;padding:1px 5px;
               margin-right:7px;color:var(--dimmer);vertical-align:1px}

/* ---------- correlation table ---------- */
.corr{width:100%;border-collapse:collapse;font-size:14px}
.corr th{text-align:left;color:var(--dim);font-weight:400;font-size:10.5px;
         letter-spacing:.1em;text-transform:uppercase;padding:0 12px 10px 0;
         border-bottom:1px solid var(--line)}
.corr td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line)}
.corr tr:last-child td{border-bottom:none}
.corr .num{font-variant-numeric:tabular-nums;text-align:right;width:76px}
.corr .sig{color:var(--gold)}
.corr .up{color:var(--buy)} .corr .dn{color:var(--sell)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:56px;padding:28px 0 46px;
      color:var(--dimmer);font-size:12.5px}
.foot .cols{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:20px}
.foot h4{color:var(--dim);font-size:10.5px;letter-spacing:.14em;
         text-transform:uppercase;margin-bottom:10px}
.foot ul{list-style:none}
.foot li{margin-bottom:6px}
.foot a{color:var(--dimmer)}
.foot a:hover{color:var(--gold-hi)}

@media (max-width:1040px){
  .hero{grid-template-columns:1fr 1fr}
  .column{grid-column:1 / -1}
}
@media (max-width:720px){
  .hero{grid-template-columns:1fr}
  .chan .nm{width:120px;font-size:12.5px}
  .prose{font-size:16.5px}
  .masthead .wrap{gap:14px}
  .nav{gap:14px;font-size:13px;order:3;width:100%}
  .masthead .right{order:2}
}

/* ---------- the instrument ---------- */
.dial-wrap{width:100%;display:flex;flex-direction:column;align-items:center}
.dial-stage{position:relative;width:100%;max-width:400px;aspect-ratio:1}
.dial-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
           filter:drop-shadow(0 16px 30px rgba(0,0,0,.55))}
.dial-svg{position:absolute;inset:0;width:100%;height:100%}
.dial-readout{text-align:center;margin-top:4px}
.dial-value{font-family:var(--serif);font-size:52px;font-weight:700;
            line-height:1;letter-spacing:-.02em;
            text-shadow:0 2px 18px rgba(0,0,0,.6)}
.dial-verdict{font-size:13px;letter-spacing:.18em;text-transform:uppercase;
              margin-top:9px}
.dial-scale{display:flex;justify-content:space-between;gap:12px;
            max-width:300px;margin:14px auto 0;color:var(--dimmer);
            font-size:11px;letter-spacing:.06em}

/* ---------- live candles ---------- */
.chart-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
            margin-bottom:14px}
.chart-px{font-family:var(--serif);font-size:30px;font-weight:700}
.chart-chg{font-size:15px;font-variant-numeric:tabular-nums}
.chart-chg.up{color:var(--buy)} .chart-chg.dn{color:var(--sell)}
.chart-meta{margin-left:auto;color:var(--dimmer);font-size:12px}
#candles{width:100%;height:340px;display:block}

/* Graceful fallback when a generated image is missing: a branded gold
   gradient instead of a broken-image icon. The onerror handler adds .imgfail
   to the container and removes the <img>. */
.imgfail{
  background:
    radial-gradient(120% 100% at 78% 12%, rgba(240,200,96,.28), transparent 60%),
    linear-gradient(135deg,#161c26 0%,#0f141c 55%,#0b0e13 100%);
  position:relative;
}
.imgfail::after{
  content:"EVANDER SIGNAL";
  position:absolute; right:12px; bottom:10px;
  font:600 10px/1 "Helvetica Neue",Arial,sans-serif; letter-spacing:.18em;
  color:rgba(212,169,57,.55);
}
.thumb.imgfail{min-height:120px}
.hero-img.imgfail{min-height:280px; border-radius:12px}