/* Claed Crypto — fast, dark, scannable. System fonts (no web-font load = quick LCP).
   House void base; amber/gold accent lane (--amber #ffb020 family). */
:root{
  --bg:#0a0e14; --bg2:#0d1320; --surface:#121a2b; --surface2:#16203400;
  --ink:#e8eef7; --muted:#8b98ad; --faint:#5b6678;
  --line:#1f2a3d; --line2:#2a3852;
  --accent:#ffb020; --amber:#ffb020; --gold:#ffd166;
  --press:#ffb020; --independent:#ffcf70; --protocol:#9db2ff; --exchange:#ff8fd0; --research:#6fd6a8;
  --maxw:1140px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1000px 520px at 82% -8%, #101a30 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased;
}
#space{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
body.no-webgl #space{display:none}

/* per-company hub: a static, SEO-safe nebula tinted to the company colour (zero JS).
   color-mix degrades to the base dark ground on old browsers. */
body.company-page{
  background:
    radial-gradient(56% 46% at 80% 6%, color-mix(in srgb, var(--c,#4aa8ff) 26%, transparent), transparent 58%),
    radial-gradient(52% 58% at 8% 94%, color-mix(in srgb, var(--c,#4aa8ff) 15%, transparent), transparent 62%),
    radial-gradient(150% 130% at 50% 24%, var(--bg2) 0%, var(--bg) 60%);
  background-attachment:fixed;
}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* header */
.site{border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(13,19,32,.9),rgba(10,14,20,.6));position:sticky;top:0;z-index:10;backdrop-filter:blur(8px)}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:800;font-size:1.2rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:.5rem}
.brand-mark{color:var(--accent);font-size:1.05em;filter:drop-shadow(0 0 10px rgba(255,176,32,.6))}
.nav{display:flex;gap:1.3rem;font-size:.92rem}
.nav a{color:var(--muted);text-decoration:none;transition:color .15s}
.nav a:hover{color:var(--ink)}
/* return-to-origin link: the Claed3D universe "home star" */
.nav a.origin{color:#cbd8ee;font-weight:600;display:inline-flex;align-items:center;gap:.3em;
  padding:.18em .7em;border-radius:999px;
  background:radial-gradient(120% 170% at 50% 130%, rgba(120,160,255,.16), transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(150,180,255,.18);transition:color .25s,box-shadow .35s,transform .25s}
.nav a.origin:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(170,200,255,.42),0 6px 26px rgba(90,130,255,.3)}
.tag{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:14px;padding-top:2px;color:var(--muted);font-size:.9rem;flex-wrap:wrap}
.updated{color:var(--faint);font-size:.82rem}

/* main */
.main{padding:26px 20px 60px}
.sec{margin:30px 0}
.sec:first-of-type{margin-top:8px}
.sec-h{font-size:.82rem;text-transform:uppercase;letter-spacing:.16em;color:var(--faint);font-weight:700;margin:0 2px 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}

.item{background:linear-gradient(180deg,var(--surface),#0f1626);border:1px solid var(--line);border-radius:14px;padding:16px 17px;transition:border-color .18s,transform .18s;display:flex;flex-direction:column;gap:9px}
.item:hover{border-color:var(--line2);transform:translateY(-2px)}
.meta{display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--faint)}
.src{font-weight:700;font-size:.72rem;letter-spacing:.02em;padding:2px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.src-press{color:var(--press);border-color:rgba(255,176,32,.35)}
.src-independent{color:var(--independent);border-color:rgba(255,207,112,.35)}
.src-protocol{color:var(--protocol);border-color:rgba(157,178,245,.35)}
.src-exchange{color:var(--exchange);border-color:rgba(255,143,208,.35)}
.src-research{color:var(--research);border-color:rgba(111,214,168,.35)}
.meta time{margin-left:auto}
.title{font-size:1.06rem;line-height:1.3;font-weight:650;letter-spacing:-.01em}
.title a{text-decoration:none;color:var(--ink);transition:color .15s}
.title a:hover{color:var(--accent)}
.sum{color:#c4cfdf;font-size:.94rem}
.why{font-size:.88rem;color:#cdd8e8;background:rgba(255,176,32,.07);border-left:2px solid var(--accent);padding:8px 11px;border-radius:0 8px 8px 0}
.why-k{display:inline-block;font-weight:700;color:var(--accent);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-right:.5em}
.empty{color:var(--muted);text-align:center;padding:60px 0}

/* static pages */
.page{max-width:760px}
.page h1{font-size:1.9rem;letter-spacing:-.02em;margin:6px 0 18px}
.page h2{font-size:1.15rem;margin:26px 0 8px;color:var(--ink)}
.page p{color:#c4cfdf;margin:10px 0}
.page a{color:var(--accent)}
.fine{color:var(--faint);font-size:.85rem}

/* A-ADS slots: ship with the `hidden` attribute (display:none) so nothing renders until
   aads.js mounts a real unit. When revealed, this frames the sandboxed iframe. */
.ad-slot{margin:22px 0;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:90px}
.ad-slot[hidden]{display:none}
/* keep the ad surface out of the immersive galaxy view (shows in the readable fallback) */
body.galaxy-on .ad-slot{display:none}

/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:40px;padding:28px 0 46px;color:var(--muted);font-size:.9rem}
.site-foot p{margin:8px 0;max-width:70ch}
.site-foot .fine{color:var(--faint);font-size:.82rem}
.site-foot .disclaimer{color:var(--gold);opacity:.85;font-weight:600}
.foot-nav{display:flex;gap:1.1rem;margin:14px 0;flex-wrap:wrap}
.foot-nav a{color:var(--muted);text-decoration:none}
.foot-nav a:hover{color:var(--ink)}
.copy{color:var(--faint);font-size:.82rem}

/* Keep the backdrop subordinate to the reading surfaces. */
.site{background:linear-gradient(180deg,rgba(13,19,32,.96),rgba(10,14,20,.82))}
.sec-h{color:var(--muted)}
.site-foot{background:rgba(8,12,19,.88);backdrop-filter:blur(2px)}

/* consent */
.consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:620px;margin:0 auto;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;display:flex;gap:14px;align-items:center;justify-content:space-between;font-size:.86rem;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:50}
.consent a{color:var(--accent)}
.consent button{background:var(--accent);color:#05203f;border:0;border-radius:8px;padding:8px 16px;font-weight:700;cursor:pointer}

/* ---------- Galaxy mode (home) ---------- */
/* company headings (fallback list + panel) */
.sec-h .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c,#6cf);box-shadow:0 0 12px var(--c,#6cf);margin-right:.55em;vertical-align:middle}
.sec-h .cnt{color:var(--faint);font-weight:700;margin-left:.45em}
.sec-h{color:var(--ink)}

/* projected 3D company labels (galaxy.js injects .label chips into #labels) */
.labels{position:fixed;inset:0;z-index:6;pointer-events:none}
.label{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;padding:5px 11px;border-radius:999px;
  font-size:.82rem;font-weight:600;color:#eaf2ff;background:rgba(10,15,26,.55);
  border:1px solid var(--lc,rgba(120,160,255,.4));backdrop-filter:blur(3px);
  transition:transform .12s ease,background .15s ease,opacity .25s ease}
.label:hover,.label.active{background:rgba(22,32,54,.9);transform:translate(-50%,-50%) scale(1.07)}
.label .ldot{width:8px;height:8px;border-radius:50%;background:var(--lc,#6cf);box-shadow:0 0 12px var(--lc,#6cf)}
.label .lcnt{font-size:.72rem;color:var(--muted);font-weight:700}
.label.dim{opacity:.32}

.ghint{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:7;color:var(--muted);
  font-size:.8rem;letter-spacing:.03em;background:rgba(8,12,19,.62);padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);pointer-events:none}

/* the sliding company news panel (opened on click) */
.panel{position:fixed;top:0;right:0;bottom:0;width:min(460px,94vw);z-index:20;
  background:linear-gradient(180deg,rgba(10,15,26,.97),rgba(8,11,20,.985));border-left:1px solid var(--line2);
  box-shadow:-24px 0 70px rgba(0,0,0,.55);transform:translateX(100%);
  transition:transform .34s cubic-bezier(.16,.8,.24,1);display:flex;flex-direction:column;overflow:hidden}
.panel.open{transform:none}
.panel-head{display:flex;align-items:center;gap:.6em;padding:18px 20px 13px;border-bottom:1px solid var(--line)}
.panel-head .dot{width:12px;height:12px;border-radius:50%;background:var(--c,#6cf);box-shadow:0 0 16px var(--c,#6cf);flex:none}
.panel-head h2{font-size:1.15rem;font-weight:700;flex:1;letter-spacing:-.01em}
.panel-head .cnt{color:var(--faint);font-size:.85rem}
.panel-close{background:none;border:0;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}
.panel-close:hover{color:var(--ink)}
.panel-body{overflow-y:auto;padding:14px 18px 34px;display:flex;flex-direction:column;gap:12px}
.panel .item{background:rgba(18,26,43,.66)}

/* galaxy-on: the 3D takes over; readable list + footer hidden (still in DOM for crawlers) */
body.galaxy-on #space{pointer-events:auto;z-index:0}
body.galaxy-on .feed-fallback{display:none}
body.galaxy-on .site-foot{display:none}
body.galaxy-on .main{min-height:calc(100vh - 160px)}
/* no-webgl / reduced-motion: readable per-company list shows; galaxy chrome hidden */
body.no-webgl .labels,body.no-webgl .ghint,body.no-webgl #space{display:none}

@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .nav{gap:1rem;font-size:.86rem}
  .brand{font-size:1.08rem}
  .main{padding:20px 16px 50px}
  .panel{width:100vw}
  .label{font-size:.75rem;padding:4px 9px}
}
@media (prefers-reduced-motion:reduce){.item{transition:none}.item:hover{transform:none}.panel{transition:none}}

/* ---------- company hub pages + internal-link nav ---------- */
.sec-h a{color:inherit;text-decoration:none}
.sec-h a:hover{color:var(--c,#6cf)}
.companies{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 24px}
.companies .chip{display:inline-flex;align-items:center;gap:.45em;text-decoration:none;color:var(--muted);
  font-size:.82rem;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(18,26,43,.5);transition:color .15s,border-color .15s,background .15s}
.companies .chip:hover{color:var(--ink);border-color:var(--c,#6cf)}
.companies .chip.on{color:#eaf2ff;border-color:var(--c,#6cf);background:rgba(30,42,66,.72)}
.companies .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--c,#6cf);box-shadow:0 0 10px var(--c,#6cf)}
.companies .chip .n{color:var(--faint);font-weight:700;font-size:.74rem}
.crumb{color:var(--faint);font-size:.82rem;margin:2px 0 12px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 .4em;opacity:.55}
.company .chead{display:flex;align-items:center;gap:.5em;font-size:1.9rem;letter-spacing:-.02em;margin:2px 0 12px}
.company .chead .dot{width:14px;height:14px;border-radius:50%;background:var(--c,#6cf);box-shadow:0 0 16px var(--c,#6cf);flex:none}
.company .chead .cnt{color:var(--faint);font-size:1rem;font-weight:700}
.company .lede{color:#c4cfdf;max-width:72ch;margin:0 0 4px;font-size:1rem;line-height:1.6}
.site-foot .fine a{color:var(--muted);text-decoration:none}
.site-foot .fine a:hover{color:var(--ink)}

/* ---------- Latest page / Signal Stream ---------- */
.main.latest{max-width:760px}
.latest-head{margin:6px 0 18px}
.latest-head h1{font-size:2rem;letter-spacing:-.02em;margin:0 0 8px}
.latest-head .lede{color:#a3b3ca;max-width:70ch;font-size:1rem;line-height:1.6;margin:0}
.stream-feed{display:flex;flex-direction:column;gap:14px}
.band{position:sticky;top:60px;z-index:5;margin:20px 0 2px;padding:7px 0;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.18em;color:var(--faint);font-weight:700;
  background:linear-gradient(180deg,rgba(10,14,20,.97),rgba(10,14,20,.72));backdrop-filter:blur(5px)}
.band:first-child{margin-top:0}
.stream-item .meta{gap:9px;flex-wrap:wrap}
.stream-item .co{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;color:var(--muted);font-weight:600;font-size:.74rem}
.stream-item .co .dot{width:7px;height:7px;border-radius:50%;background:var(--c,#6cf);box-shadow:0 0 8px var(--c,#6cf)}
.stream-item .co:hover{color:var(--ink)}
.stream-item .meta time{margin-left:auto}
.stream-item.lit{border-color:var(--line2);box-shadow:0 0 0 1px rgba(120,160,255,.32),0 10px 34px rgba(0,0,0,.36);transform:translateY(-1px)}
/* the timeline canvas — right margin, wide screens only */
/* canvas is a replaced element: top+bottom won't stretch it — set an explicit height */
#stream{position:fixed;top:64px;right:0;width:320px;height:calc(100vh - 64px);z-index:1;pointer-events:auto;display:none}
.tip{position:fixed;z-index:30;pointer-events:none;background:rgba(10,15,26,.93);border:1px solid var(--line2);
  border-radius:8px;padding:6px 10px;font-size:.78rem;color:var(--ink);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5)}
@media (min-width:1280px){
  body.stream-on #stream{display:block}
  body.stream-on .main.latest{margin-left:auto;margin-right:360px}
}
body.no-webgl #stream,body.no-webgl .tip{display:none}

/* ---------- A-ADS slot (cookieless; A-ADS family rollout) ----------
   Scoped to [data-aa-unit] so it never touches the gated-off AdSense .ad-slot
   above. Inert by default: an explicit hide is REQUIRED here because this repo
   has no global [hidden] rule and the AdSense `.ad-slot{display:flex}` would
   otherwise override the UA `[hidden]{display:none}` and reveal an empty box.
   With empty unit ids the slot stays hidden and no iframe/network is created,
   so the page is pixel- and network-identical to before. On the galaxy home the
   3D scene takes over (feed + footer are hidden); the slot follows that pattern
   so the flagship scene stays clean — it renders in the readable fallback. */
.ad-slot[data-aa-unit][hidden] { display: none; }
body.galaxy-on .ad-slot[data-aa-unit] { display: none; }
.ad-slot[data-aa-unit] {
  width: 100%;
  max-width: 728px;
  height: 90px;
  margin: 26px auto 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
@media (max-width: 560px) {
  .ad-slot[data-aa-unit] { max-width: 320px; height: 100px; }
}