/* ============================================================
   Insights — Knowledge Base
   Mike Kennedy · AI Strategy & Transformation
   Brand: Sora (display) + Inter (body), electric blue #066AFE
   ============================================================ */
:root{
  --ink:#001a3d; --navy:#002775; --navy-2:#022AC0; --blue:#066AFE; --sky:#00B3FF; --pale:#CFE9FE;
  --blue-700:#0a4fc0; --blue-50:#eef4ff; --blue-100:#dbe8ff;
  --ink-2:#33415c; --ink-3:#5a6b86;
  --line:#dbe6f4; --line-2:#eef3fa;
  --bg:#ffffff; --wash:#f6f9fd; --paper:#fbfcfe;
  --post:#0090d8; --post-50:#e2f4ff;
  --radius:14px; --radius-sm:9px;
  --shadow:0 1px 2px rgba(0,30,80,.06), 0 10px 30px rgba(0,30,80,.07);
  --maxw:980px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Sora",system-ui,sans-serif; color:var(--ink); margin:0}

/* ---- top bar (matches tool pages) ---- */
.bar{
  position:sticky; top:0; z-index:50; background:rgba(251,252,254,.85);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 22px; height:64px;
}
.bar .inner{display:flex; align-items:center; gap:14px; width:100%; max-width:var(--maxw); margin:0 auto}
.brand{display:flex; align-items:center; gap:11px; font-family:"Sora"; font-weight:700; font-size:15px; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand small{display:block; font-family:"Inter"; font-weight:500; font-size:11px; color:var(--ink-3); letter-spacing:.01em}
.mark{
  width:28px; height:28px; border-radius:8px; flex:0 0 auto; position:relative;
  background:linear-gradient(135deg,var(--blue),var(--sky)); box-shadow:0 4px 12px rgba(6,106,254,.3);
}
.mark::after{content:""; position:absolute; inset:8px; border-radius:3px; background:#fff; opacity:.92}
.bar .spacer{flex:1}
.bar-home{font-size:13px; font-weight:600; color:var(--navy); white-space:nowrap}
.bar-home:hover{color:var(--blue); text-decoration:none}

/* ---- hero ---- */
.hero{max-width:var(--maxw); margin:0 auto; padding:14px 22px 8px}
.eyebrow{
  font-family:"Sora"; font-weight:600; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue); margin:0 0 14px;
}
.hero h1{
  font-size:clamp(30px,5vw,46px); line-height:1.05; font-weight:700;
  letter-spacing:-.02em; margin:0 0 14px; max-width:18ch;
}
.hero h1 .accent{
  background:linear-gradient(90deg,var(--blue),#3f8bff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{font-size:17px; color:var(--ink-2); max-width:56ch; margin:0 0 26px}

/* ---- search (the signature) ---- */
.search-wrap{position:relative; max-width:680px}
.search-field{position:relative; display:flex; align-items:center}
.search-field svg{
  position:absolute; left:18px; width:20px; height:20px; color:var(--ink-3);
  pointer-events:none;
}
#q{
  width:100%; font-family:inherit; font-size:18px; color:var(--ink);
  padding:18px 18px 18px 50px; border:1.5px solid var(--line);
  border-radius:var(--radius); background:var(--paper); outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
#q::placeholder{color:var(--ink-3)}
#q:focus{
  border-color:var(--blue); background:#fff;
  box-shadow:0 0 0 4px var(--blue-50);
}
.clear-q{
  position:absolute; right:12px; border:0; background:var(--line-2); color:var(--ink-2);
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1;
  display:none; align-items:center; justify-content:center;
}
.clear-q:hover{background:var(--blue-100); color:var(--blue-700)}
.search-hint{margin:12px 2px 0; font-size:13px; color:var(--ink-3)}
.search-hint kbd{
  font-family:"Sora"; font-size:11px; background:#fff; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:6px; padding:1px 6px; color:var(--ink-2);
}

/* ---- controls row ---- */
.controls{
  max-width:var(--maxw); margin:0 auto; padding:24px 22px 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px;
}
.seg{display:inline-flex; background:var(--wash); border:1px solid var(--line); border-radius:999px; padding:3px}
.seg button{
  font-family:"Sora"; font-weight:500; font-size:13px; color:var(--ink-2);
  border:0; background:transparent; padding:7px 16px; border-radius:999px; cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--blue); color:#fff}
.result-count{font-size:14px; color:var(--ink-3); margin-left:auto}
.result-count b{color:var(--ink); font-variant-numeric:tabular-nums}

/* ---- topic chips ---- */
.chips{
  max-width:var(--maxw); margin:0 auto; padding:16px 22px 6px;
  display:flex; flex-wrap:wrap; gap:9px;
}
.chip{
  font-family:"Sora"; font-weight:500; font-size:13px; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; cursor:pointer; transition:.13s; white-space:nowrap;
}
.chip .n{color:var(--ink-3); font-variant-numeric:tabular-nums; margin-left:6px; font-size:12px}
.chip:hover{border-color:var(--blue-100); background:var(--blue-50)}
.chip[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.chip[aria-pressed="true"] .n{color:rgba(255,255,255,.75)}

/* ---- results ---- */
.results{max-width:var(--maxw); margin:0 auto; padding:18px 22px 40px; display:grid; gap:14px}
.card{
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  padding:20px 22px; transition:box-shadow .15s, border-color .15s; position:relative;
}
.card:hover{box-shadow:var(--shadow); border-color:var(--line-2)}
.card.article{border-left:3px solid var(--blue)}
.card-top{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.kind{
  font-family:"Sora"; font-weight:600; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 9px; border-radius:6px;
}
.kind.article{color:var(--blue-700); background:var(--blue-50)}
.kind.post{color:var(--post); background:var(--post-50)}
.card-date{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.card h3{font-size:19px; line-height:1.3; letter-spacing:-.01em; margin:0 0 8px}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--blue)}
.card .excerpt{font-size:15px; color:var(--ink-2); margin:0 0 14px}
.card .excerpt mark, .card h3 mark{background:#fff2b3; color:inherit; padding:0 1px; border-radius:2px}
.card-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.card-foot .topics{display:flex; flex-wrap:wrap; gap:6px; margin-right:auto}
.tinytag{
  font-size:11.5px; color:var(--ink-3); background:var(--wash);
  border:1px solid var(--line-2); border-radius:6px; padding:2px 8px; cursor:pointer;
}
.tinytag:hover{color:var(--blue-700); background:var(--blue-50); text-decoration:none}
.read{font-family:"Sora"; font-weight:600; font-size:13.5px}
.read.secondary{color:var(--ink-3); font-weight:500}
.read.secondary:hover{color:var(--blue)}
.expandbtn{
  font-family:"Sora"; font-weight:600; font-size:13.5px; color:var(--blue);
  border:0; background:none; cursor:pointer; padding:0;
}
.fulltext{
  margin:4px 0 14px; font-size:15px; color:var(--ink); white-space:pre-wrap;
  border-left:2px solid var(--line); padding-left:16px; display:none;
}
.card.open .fulltext{display:block}

/* ---- load more / empty ---- */
.more-wrap{text-align:center; padding:8px 0 0}
.btn-more{
  font-family:"Sora"; font-weight:600; font-size:14px; color:var(--blue);
  background:var(--blue-50); border:1px solid var(--blue-100); border-radius:999px;
  padding:11px 24px; cursor:pointer;
}
.btn-more:hover{background:var(--blue-100)}
.empty{text-align:center; padding:60px 20px; color:var(--ink-2)}
.empty h3{font-size:20px; margin-bottom:8px}
.empty button{color:var(--blue); border:0; background:none; cursor:pointer; font:inherit; text-decoration:underline}

/* ---- footer ---- */
.site-foot{
  border-top:1px solid var(--line); background:var(--wash);
  padding:34px 22px; text-align:center; color:var(--ink-2); font-size:14px;
}
.site-foot p{margin:4px 0}

/* ============================================================
   Article reader
   ============================================================ */
.reader{background:var(--paper)}
.article{max-width:720px; margin:0 auto; padding:8px 22px 20px}
.article h1{font-size:clamp(28px,4.5vw,40px); line-height:1.12; letter-spacing:-.02em; margin:6px 0 12px}
.article-meta{color:var(--ink-3); font-size:14px; margin:0 0 18px}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px}
.tag-row .tag{
  font-family:"Sora"; font-weight:500; font-size:12.5px; color:var(--blue-700);
  background:var(--blue-50); border-radius:999px; padding:5px 12px;
}
.tag-row .tag:hover{background:var(--blue-100); text-decoration:none}
.prose{font-size:18.5px; line-height:1.75; color:#1d2536}
.prose h2{font-size:26px; line-height:1.25; margin:42px 0 14px; letter-spacing:-.01em}
.prose h3{font-size:21px; line-height:1.3; margin:34px 0 12px}
.prose p{margin:0 0 22px}
.prose a{color:var(--blue); text-decoration:underline; text-underline-offset:2px}
.prose ul,.prose ol{margin:0 0 22px; padding-left:24px}
.prose li{margin:0 0 8px}
.prose strong{color:var(--ink); font-weight:650}
.prose blockquote{
  margin:34px 0; padding:6px 0 6px 24px; border-left:3px solid var(--blue);
  font-size:21px; line-height:1.5; color:var(--ink); font-style:italic;
}
.prose hr{border:0; border-top:1px solid var(--line); margin:38px 0}
.article-foot{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:44px; padding-top:26px;
  border-top:1px solid var(--line);
}
.btn-ghost{
  font-family:"Sora"; font-weight:600; font-size:14px; color:var(--blue);
  border:1px solid var(--blue-100); background:var(--blue-50);
  border-radius:999px; padding:11px 20px;
}
.btn-ghost:hover{background:var(--blue-100); text-decoration:none}

/* ---- responsive ---- */
@media (max-width:640px){
  .hero{padding-top:6px}
  .hero h1{font-size:30px}
  .hero-sub{font-size:16px}
  #q{font-size:16px; padding:16px 16px 16px 46px}
  .controls{padding-top:20px}
  .result-count{margin-left:0; width:100%; order:3}
  .chips{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:12px}
  .chips::-webkit-scrollbar{display:none}
  .card{padding:18px}
  .article{padding-left:18px; padding-right:18px}
  .prose{font-size:17.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important; scroll-behavior:auto !important}}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px; border-radius:4px}

/* ---- crawlable all-articles browse ---- */
.all-articles{max-width:var(--maxw); margin:0 auto; padding:28px 22px 48px; border-top:1px solid var(--line)}
.all-articles h2{font-size:22px; letter-spacing:-.01em; margin:0 0 6px}
.al-note{color:var(--ink-3); font-size:14px; margin:0 0 18px}
.al-list{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.al-list li{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; padding:9px 10px; border-radius:8px}
.al-list li:hover{background:var(--wash)}
.al-list a{font-family:"Sora"; font-weight:600; font-size:15px; color:var(--ink)}
.al-list a:hover{color:var(--blue)}
.al-topics{font-size:12px; color:var(--ink-3)}