/* ============================================================================
   dark-signal.css — shared thinkwright.ai skin
   Near-black ground, ice-cyan accent, mono apparatus, thin hairline frames.
   Chrome (sidebar/footer), landing components, and article components live
   here; pages carry only their own content markup.
   ========================================================================== */

:root {
  --bg:        #1A1A19;
  --bg-lift:   #20201F;
  --ink:       #E6E6E1;
  --ink-soft:  #C7C7C2;
  --ink-dim:   #8F8F8A;
  --ink-faint: #6E6E68;
  --cyan:        #A9D7E8;
  --cyan-bright: #C9EAF6;
  --cyan-dim:    rgba(169,215,232,0.55);
  --cyan-faint:  rgba(169,215,232,0.18);
  --frame:       rgba(236,236,232,0.13);
  --frame-hover: rgba(169,215,232,0.45);
  --glow:        rgba(169,215,232,0.10);
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --sans: 'Hanken Grotesk', -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
/* anchored targets land below the fixed titlebar, not under it */
[id] { scroll-margin-top:108px; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--ink);
  font:400 16.5px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
::selection { background:rgba(169,215,232,0.25); }

/* fixed mask: page content never scrolls above the masthead's bottom row */
.side::before {
  content:''; position:fixed; top:0; left:0; right:0; height:92px;
  background:var(--bg); border-bottom:1px solid var(--frame);
  z-index:-1; pointer-events:none;
}

/* ---------- wordmark: masthead breadcrumb, reused at footer scale ---------- */
.wordmark {
  font-size:36px; font-weight:400; letter-spacing:-0.015em; line-height:1;
  color:var(--ink);
}
.side .wordmark { margin-bottom:52px; }
.wordmark .scan {
  position:relative; top:0.75px;  /* stripe raster shaves the baseline row; re-seat (0.5 = 1 device px at 2x) */
  color:transparent;
  background:repeating-linear-gradient(to bottom, #EFEFEA 0 1.5px, transparent 1.5px 2.5px);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 2px rgba(239,239,234,0.45)) drop-shadow(0 0 7px rgba(239,239,234,0.22));
}

/* ---------- chrome: fixed sidebar ---------- */
.side {
  position:fixed; top:44px; left:36px; bottom:44px; width:158px;
  display:flex; flex-direction:column; z-index:10;
}
.brand {
  font:500 12px/1 var(--mono); letter-spacing:.16em; color:var(--ink);
  margin-bottom:52px; white-space:nowrap; text-transform:uppercase;
}
.brand .glyph { color:var(--cyan); text-shadow:0 0 12px rgba(169,215,232,.5); }
.side nav a {
  display:block; font:400 11.5px/2.6 var(--mono); letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-dim); transition:color .3s;
  position:relative;
}
.side nav a:hover { color:var(--ink); }
.side nav a.active { color:var(--cyan); text-shadow:0 0 14px rgba(169,215,232,.45); }
.side nav a.active::before {
  content:'◆'; position:absolute; left:-20px; font-size:9px; top:1px;
  color:var(--cyan);
}
.side-foot { margin-top:auto; }
.side-foot a {
  display:block; font:400 11px/2.4 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); transition:color .3s;
}
.side-foot a:hover { color:var(--cyan); }

main { margin-left:226px; max-width:1214px; padding:0 56px 0 0; }

/* ---------- hero ---------- */
.hero {
  padding-top:36px;
  display:grid; grid-template-columns:1.02fr 1fr; gap:72px;
  align-items:center;
}
.hero-art {
  border:1px solid var(--cyan-faint);
  aspect-ratio:1.16;
  position:relative; overflow:hidden;
}
.hero-art canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.eyebrow {
  font:400 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan-dim); margin-bottom:28px;
}
h1 {
  font-size:clamp(42px,4.8vw,66px); font-weight:400; line-height:1.07;
  letter-spacing:-0.015em; margin-bottom:30px;
}
h1 .dim { color:var(--ink-dim); }
.lede { max-width:52ch; color:var(--ink-soft); font-size:17px; }

/* ---------- local family sub-navigation ---------- */
.subnav {
  display:flex; flex-wrap:wrap; gap:10px 28px;
  border-bottom:1px solid var(--frame);
  margin:108px 0 0; padding:0 0 14px;
}
.subnav a {
  font:400 11px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s;
}
.subnav a:hover { color:var(--ink); }
.subnav a.active { color:var(--cyan); text-shadow:0 0 12px rgba(169,215,232,.45); }

/* ---------- pillar ticker ---------- */
.ticker {
  border-top:1px solid var(--frame); border-bottom:1px solid var(--frame);
  padding:20px 0; margin:24px 0 0;
  display:flex; flex-wrap:wrap; gap:14px 56px;
}
.ticker span {
  font:400 11.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); white-space:nowrap;
}
.ticker span::before { content:'◇ '; color:var(--cyan-dim); }

/* ---------- sections ---------- */
.section { padding:110px 0 0; }
.sec-head { max-width:720px; margin-bottom:56px; }
.num {
  font:400 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan-dim); margin-bottom:20px;
}
h2 { font-size:34px; font-weight:400; letter-spacing:-0.01em; margin-bottom:18px; }
.sec-head p { color:var(--ink-dim); font-size:15.5px; max-width:62ch; }

/* ---------- cards ---------- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card {
  position:relative;
  border:1px solid var(--frame); padding:28px 26px 24px;
  display:flex; flex-direction:column; min-height:220px;
  transition:border-color .35s, box-shadow .35s, background .35s;
  background:transparent;
}
/* stretched link: whole card clicks through; siblings with z-index sit above */
.card .card-link::after { content:''; position:absolute; inset:0; }
.card .gh {
  position:absolute; top:24px; right:22px; z-index:1;
  color:var(--ink-faint); line-height:0; transition:color .3s;
}
.card .gh:hover { color:var(--cyan); }
.card .gh svg { width:16px; height:16px; fill:currentColor; }
.card:hover {
  border-color:var(--frame-hover);
  box-shadow:0 0 32px var(--glow);
  background:var(--bg-lift);
}
.card.feature { grid-column:span 2; }
.card .k {
  font:400 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan-dim); margin-bottom:18px;
}
.card h3 { font-size:20px; font-weight:500; margin-bottom:10px; letter-spacing:-0.005em; }
.card p { font-size:14.5px; line-height:1.6; color:var(--ink-dim); }
.card .spacer { flex:1 1 auto; min-height:18px; }
.card .stat {
  font:400 10.5px/1.7 var(--mono); letter-spacing:.06em;
  color:var(--ink-faint); margin-bottom:14px;
}
/* unframed lattice fragment — fills an empty grid slot with floating cells */
.lattice-fill { grid-column:span 2; position:relative; overflow:hidden; min-height:220px; }
.lattice-fill canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }

.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag {
  font:400 10px/1 var(--mono); letter-spacing:.08em;
  color:var(--ink-dim); border:1px solid var(--frame);
  padding:4px 8px; white-space:nowrap;
}

/* ---------- article ---------- */
.article { display:grid; grid-template-columns:minmax(0,660px) 200px; gap:80px; }
.article-body > p { color:var(--ink-soft); margin-bottom:24px; max-width:62ch; }
.article-body h3 {
  font-size:22px; font-weight:500; margin:48px 0 18px; letter-spacing:-0.005em;
}
.toc { position:sticky; top:48px; align-self:start; }
.toc .t {
  font:400 10px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:18px;
}
.toc a {
  display:block; font:400 11.5px/2.3 var(--mono); letter-spacing:.06em;
  color:var(--ink-dim); transition:color .3s;
}
.toc a:hover { color:var(--cyan); }

.stat-strip {
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--frame); margin:36px 0 44px;
}
.stat-strip > div { padding:24px 24px 20px; border-left:1px solid var(--frame); }
.stat-strip > div:first-child { border-left:0; }
.stat-strip b { display:block; font-size:30px; font-weight:400; color:var(--ink); margin-bottom:6px; }
.stat-strip span {
  font:400 10px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
}

figure { margin:44px 0; }
.chart { border:1px solid var(--frame); padding:30px 26px 20px; }
.chart svg { display:block; width:100%; height:auto; }
figcaption {
  font:400 10.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:14px;
}
figcaption .fig { color:var(--cyan-dim); }

/* ---------- footer ---------- */
footer {
  margin-top:130px; border-top:1px solid var(--frame);
  padding:30px 0 44px; display:flex; justify-content:space-between; gap:24px;
  font:400 11px/1 var(--mono); letter-spacing:.06em;
  color:var(--ink-faint);
}
footer .glyph { color:var(--cyan-dim); }
footer a { color:var(--ink-dim); transition:color .3s; margin-left:32px; }
footer a:hover { color:var(--cyan); }

/* ---------- small screens ---------- */
@media (max-width:980px) {
  .side { position:static; width:auto; padding:32px 28px 0; flex-direction:row; flex-wrap:wrap; gap:8px 24px; }
  .brand { margin-bottom:0; }
  .side .wordmark { font-size:24px; margin-bottom:0; width:100%; }
  .side::before { display:none; }
  .side nav { display:flex; flex-wrap:wrap; gap:0 20px; } .side nav a.active::before { display:none; }
  .side-foot { display:none; }
  main { margin:0; padding:0 28px; }
  .hero { grid-template-columns:1fr; min-height:0; gap:40px; }
  .cards { grid-template-columns:1fr; } .card.feature { grid-column:auto; }
  .article { grid-template-columns:1fr; } .toc { display:none; }
  .stat-strip { grid-template-columns:1fr; }
  .stat-strip > div { border-left:0; border-top:1px solid var(--frame); }
  .stat-strip > div:first-child { border-top:0; }
}