/* Taslos design system — dark theme, from the approved 2026-11-01 mock.
   Background #0D1117 · Surface #171E28 · Border #2A3543
   Text primary #EDF2F7 · Text secondary #A8B3C2 · Accent gold #F9C74F
   Success #22C55E · Warning #F59E0B · Danger #EF4444 · Inter throughout. */
:root{
  --bg:#0D1117; --surface:#171E28; --surface-2:#1B2431; --border:#2A3543;
  --text:#EDF2F7; --mut:#A8B3C2; --faint:#7C8798;
  --gold:#F9C74F; --gold-2:#F5A623; --green:#22C55E; --warn:#F59E0B; --red:#EF4444;
  --radius:14px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
::selection{background:var(--gold);color:#0D1117}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ---------- header (transparent over hero on home; solid elsewhere) ---------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:20}
.site-head.solid{position:sticky;background:rgba(13,17,23,.96);border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.hbar{max-width:1440px;margin:0 auto;padding:18px 48px;display:flex;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none}
.brand svg{display:block}
.brand-word{font-size:27px;font-weight:300;letter-spacing:.38em;color:#fff;line-height:1;padding-top:2px}
.mainnav{margin-left:auto;display:flex;align-items:center;gap:38px}
.mainnav a{color:#E6EBF2;text-decoration:none;font-size:16.5px;font-weight:500;padding:6px 1px;position:relative}
.mainnav a:hover{color:#fff}
.mainnav a.current{color:#fff;font-weight:600}
.mainnav a.current::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;background:var(--gold);border-radius:2px}
.searchbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:#fff;text-decoration:none}
.searchbtn:hover{background:rgba(255,255,255,.1)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#0A0F16}
.hero-bg{position:absolute;inset:0;background:url('/hero-sunrise.jpg') center 38%/cover no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,11,17,.82) 0%,rgba(7,11,17,.55) 34%,rgba(7,11,17,.05) 62%,rgba(7,11,17,0) 100%),
  linear-gradient(0deg,var(--bg) 0%,rgba(13,17,23,.55) 14%,rgba(13,17,23,0) 38%),
  linear-gradient(180deg,rgba(7,11,17,.55) 0%,rgba(7,11,17,0) 22%)}
.hero-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;padding:132px 48px 30px}
.hero h1{font-size:clamp(40px,4.6vw,62px);line-height:1.08;font-weight:700;letter-spacing:-.015em;margin:0;color:#fff;max-width:640px}
.hero .tagline{font-size:clamp(18px,1.6vw,21.5px);font-weight:500;color:#F2F5F9;margin:16px 0 0}
.hero .rule{width:66px;height:3px;background:var(--gold);border-radius:2px;margin:22px 0 18px}
.hero .desc{font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.55;color:#E9EEF5;margin:0;max-width:430px}

/* ---------- page frame ---------- */
.page{max-width:1440px;margin:0 auto;padding:0 48px}

/* ---------- current read panel ---------- */
.read-panel{position:relative;z-index:3;margin-top:26px;background:rgba(23,30,40,.94);border:1px solid var(--border);border-radius:var(--radius);padding:30px 38px 32px;display:grid;grid-template-columns:1.25fr 1.25fr 1fr 1fr;box-shadow:0 18px 44px rgba(0,0,0,.38)}
.read-cell{padding:0 34px;border-left:1px solid rgba(168,179,194,.28)}
.read-cell:first-child{padding-left:0;border-left:none}
.read-cell:last-child{padding-right:0}
.r-label{font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#C7D0DC;margin:0 0 10px}
.r-big{font-size:clamp(34px,3.4vw,47px);font-weight:700;line-height:1.05;letter-spacing:-.01em;color:var(--gold);margin:0}
.r-big.caution{color:var(--gold-2)}
.read-cell p{margin-top:0}
.r-score{font-size:clamp(38px,3.8vw,54px);font-weight:700;line-height:1;color:#fff;margin:0}
.r-score span{font-size:22px;font-weight:500;color:var(--mut);margin-left:4px}
.r-score span#ui-risk{font-size:inherit;font-weight:inherit;color:inherit;margin:0}
.r-sub{font-size:15.5px;line-height:1.45;color:#D5DCE6;margin:10px 0 0;max-width:230px}
.riskbar{position:relative;height:11px;border-radius:999px;margin-top:18px;background:#3A4353;max-width:250px}
.riskbar .fill{position:absolute;top:0;bottom:0;left:0;border-radius:999px;background:linear-gradient(90deg,#22C55E 0%,#A3E635 35%,#F9C74F 65%,#F59E0B 100%)}
.riskbar .knob{position:absolute;top:50%;width:21px;height:21px;border-radius:50%;background:#F4F6F9;border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 6px rgba(0,0,0,.5)}
.trend-ico{color:var(--gold-2);margin-top:2px}

/* ---------- key indicator signals ---------- */
.sec-label{font-size:13.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#D8DEE8;margin:38px 0 16px}
.signals{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.sig{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px 15px;text-decoration:none;display:block;transition:border-color .18s ease,transform .18s ease}
.sig:hover{border-color:#3D4B61;transform:translateY(-2px)}
.sig h3{font-size:16px;font-weight:600;margin:0 0 8px;color:#F2F5F9;letter-spacing:-.005em}
.sig .spark{display:block;width:100%;height:30px}
.sig .status{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;color:#E6EBF2;margin-top:9px}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.dot.gold{background:var(--gold)} .dot.orange{background:var(--warn)} .dot.red{background:var(--red)} .dot.green{background:var(--green)}

/* ---------- motto ---------- */
.motto{display:flex;align-items:center;gap:26px;margin:42px 0 36px}
.motto .line{flex:1;height:2px;border-radius:2px}
.motto .line.l{background:linear-gradient(90deg,transparent,var(--gold))}
.motto .line.r{background:linear-gradient(90deg,var(--gold),transparent)}
.motto p{margin:0;font-style:italic;font-size:clamp(16.5px,1.55vw,19.5px);color:#E9EEF5;text-align:center;font-weight:400}

/* ---------- navigation cards ---------- */
.navcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.navcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 30px;display:flex;align-items:center;gap:20px;text-decoration:none;transition:border-color .18s ease,transform .18s ease,background .18s ease;min-width:0}
.navcard>span{min-width:0}
.navcard:hover{border-color:#3D4B61;background:var(--surface-2);transform:translateY(-2px)}
.navcard .nico{color:var(--gold);flex:none;display:flex}
.navcard h3{font-size:22px;font-weight:600;margin:0 0 4px;color:#fff}
.navcard p{margin:0;font-size:15px;line-height:1.45;color:var(--mut)}
.navcard .chev{margin-left:auto;color:var(--gold);flex:none;display:flex}

/* ---------- recent news (homepage; items rendered by tools/build-content.py) ----------
   Card styles live in /chrome.css (shared, loaded last, versioned) since
   2026-11-10 round 2. Only the section's own intro/trailing lines stay here. */
.news-sec .sub{font-size:16px;line-height:1.6;color:var(--mut);max-width:640px}
.news-sec .small{font-size:14px;color:var(--mut);margin:18px 0 0}
.news-sec .small a{color:var(--gold);text-decoration:none}
.news-sec .small a:hover{text-decoration:underline}

/* ---------- footer strip ---------- */
.footstrip{max-width:1440px;margin:0 auto;padding:44px 48px 40px;text-align:center;font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#98A3B3}
.footstrip .sep{color:#525D6E;margin:0 14px}
.footstrip a{color:#98A3B3;text-decoration:none}
.footstrip a:hover{color:#fff}

/* ---------- generic dark page (research / about) ---------- */
.pagehead{padding:52px 0 8px}
.pagehead .eyebrow{font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.pagehead h1{font-size:clamp(32px,4vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0;color:#fff;max-width:800px}
.pagehead .lede{font-size:18px;line-height:1.55;color:var(--mut);max-width:640px;margin:14px 0 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:30px 0 10px}
.rcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;text-decoration:none;display:block;transition:border-color .18s ease,transform .18s ease}
.rcard:hover{border-color:#3D4B61;transform:translateY(-2px)}
.rcard .k{font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.rcard h3{font-size:19px;font-weight:600;color:#fff;margin:0 0 7px;line-height:1.3}
.rcard p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mut)}
.prose{max-width:760px;padding-bottom:10px}
.prose p{font-size:16.5px;line-height:1.65;color:#D5DCE6;margin:0 0 14px}
.prose h2{font-size:23px;font-weight:600;color:#fff;margin:34px 0 10px}
.prose a{color:var(--gold);text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose img.photo{display:block;width:100%;max-width:430px;height:auto;border-radius:var(--radius);border:1px solid var(--border);margin:22px 0 6px}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  /* brand + full nav no longer fit on one line below ~1100px: let the bar
     wrap and the nav wrap within its own row instead of overflowing */
  .hbar{flex-wrap:wrap;row-gap:8px}
  .mainnav{flex-wrap:wrap;row-gap:4px;justify-content:flex-end}
}
@media(max-width:1180px){
  .signals{grid-template-columns:repeat(4,1fr)}
  .read-panel{grid-template-columns:1fr 1fr;gap:28px 0}
  .read-cell{padding:0 26px}
  .read-cell:nth-child(odd){padding-left:0;border-left:none}
}
@media(max-width:760px){
  .hbar{padding:14px 20px;gap:16px;flex-wrap:wrap}
  .brand-word{font-size:21px}
  .mainnav{gap:8px 18px;margin-left:0;flex-wrap:wrap;justify-content:flex-start}
  .mainnav a{font-size:15px;padding:8px 2px}
  .hero-inner{padding:118px 20px 24px}
  .page{padding:0 20px}
  .read-panel{grid-template-columns:1fr;padding:24px 22px;gap:24px;margin-top:20px}
  .read-cell{padding:0;border-left:none}
  .signals{grid-template-columns:repeat(2,1fr)}
  .navcards{grid-template-columns:1fr}
  .motto{gap:14px}
  .footstrip{padding:36px 20px 32px;line-height:2}
}
@media(max-width:420px){ .signals{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important} html{scroll-behavior:auto} }

.asof{font-size:13px;color:var(--ink-dim);margin:2px 0 20px}