/* ==========================================================================
   Blue Team of One — shared stylesheet
   Site chrome (header, index, footer) + article styles.
   To rename the blog: change the masthead text in each .html file's header.
   ========================================================================== */

:root{
  --ink:#16202E; --ink-2:#55606E; --ink-3:#7A8492;
  --paper:#F4F6F9; --card:#FFFFFF; --line:#DCE1E8; --line-2:#C6CDD7;
  --vault:#0F6E56; --vault-bg:#E1F0EB; --vault-ink:#0B4A3A;
  --entra:#534AB7; --entra-bg:#EDEBFB; --entra-ink:#3C3489;
  --sky:#185FA5; --sky-bg:#E7F0FB; --sky-ink:#0C447C;
  --warn:#A5690B; --warn-bg:#FBF0DA; --warn-ink:#6B430A;
  --stop:#A32D2D; --stop-bg:#FBE9E9; --stop-ink:#7A1F1F;
  --go:#3B6D11; --go-bg:#EDF3E0; --go-ink:#274F0A;
  --hero:#111A2A; --hero-2:#1C2740; --accent:#7FE0C2;
  --maxw:760px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:17px; line-height:1.72; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--sky-ink)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}

/* ---- Site header (slim chrome bar, all pages) ---- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(244,246,249,.86); backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head-inner{
  max-width:var(--maxw); margin:0 auto; padding:13px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.masthead{display:flex; align-items:baseline; gap:12px; text-decoration:none; color:var(--ink)}
.masthead .mark{
  font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:22px; color:var(--ink);
}
.masthead .mark b{color:var(--vault)}
.masthead .tag{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); display:none;
}
.site-nav{display:flex; gap:22px}
.site-nav a{
  font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.03em;
  color:var(--ink-2); text-decoration:none; padding:2px 0; border-bottom:2px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink); border-color:var(--vault)}
@media(min-width:640px){ .masthead .tag{display:inline} }

/* ---- Dark hero (index + article share the look) ---- */
.hero{background:var(--hero); color:#EAEEF5; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--hero-2) 1px,transparent 1px),linear-gradient(90deg,var(--hero-2) 1px,transparent 1px);
  background-size:44px 44px; opacity:.4;
  -webkit-mask-image:radial-gradient(circle at 80% 25%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 80% 25%,#000,transparent 72%);
}
.hero-inner{position:relative; max-width:var(--maxw); margin:0 auto; padding:70px 24px 60px}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 20px; display:flex; align-items:center; gap:10px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
h1{
  font-family:"Space Grotesk",sans-serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(32px,6vw,50px); line-height:1.06; margin:0 0 20px; color:#fff;
}
h1 em{font-style:normal; color:var(--accent)}
.lede{font-size:19px; line-height:1.6; color:#B9C3D4; max-width:60ch; margin:0}
.byline{
  margin-top:32px; padding-top:20px; border-top:1px solid #2A3550;
  font-family:"IBM Plex Mono",monospace; font-size:13px; color:#8593AC;
  display:flex; flex-wrap:wrap; gap:8px 20px;
}
.byline b{color:#CAD4E6; font-weight:500}
.byline a{color:var(--accent); text-decoration:none}

/* ---- Index: post list ---- */
.list{padding:52px 0 20px}
.list h2.section{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 22px; font-weight:500;
}
.post-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px 26px; margin-bottom:18px; transition:border-color .15s, transform .15s;
}
.post-card:hover{border-color:var(--line-2); transform:translateY(-1px)}
.post-meta{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.fmt{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:6px; font-weight:500;
}
.fmt.deep{background:var(--vault-bg); color:var(--vault-ink)}
.fmt.short{background:var(--sky-bg); color:var(--sky-ink)}
.post-date{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-3)}
.post-card h3{
  font-family:"Space Grotesk",sans-serif; font-size:24px; font-weight:600; letter-spacing:-.01em;
  margin:0 0 8px; line-height:1.2; color:var(--ink);
}
.post-card p{margin:0; color:var(--ink-2); font-size:16px; line-height:1.6}
.post-card .more{
  display:inline-block; margin-top:14px; font-family:"IBM Plex Mono",monospace; font-size:13px;
  color:var(--vault); font-weight:500;
}
.pipeline-note{
  border:1px dashed var(--line-2); border-radius:14px; padding:18px 22px; margin-top:8px;
  color:var(--ink-2); font-size:15px;
}
.pipeline-note b{color:var(--ink); font-weight:600}

/* ---- Article ---- */
article{padding:52px 0 30px}
.backlink{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:8px;
  font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-2); text-decoration:none;
}
.backlink:hover{color:var(--ink)}
article > .wrap > p{margin:0 0 22px}
h2{
  font-family:"Space Grotesk",sans-serif; font-weight:600; letter-spacing:-.01em;
  font-size:27px; line-height:1.2; margin:52px 0 8px; color:var(--ink);
}
h2 .num{
  font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500;
  color:var(--vault); background:var(--vault-bg); padding:3px 9px; border-radius:6px;
  margin-right:12px; vertical-align:middle;
}
.sub{color:var(--ink-2); font-size:15.5px; margin:0 0 20px; font-weight:400}
strong{font-weight:600; color:var(--ink)}
.k{
  font-family:"IBM Plex Mono",monospace; font-size:.9em; font-weight:500;
  background:#EAEEF4; color:#243247; padding:2px 6px; border-radius:5px;
  border:1px solid #D9DFE8; white-space:nowrap;
}
.k.priv{background:var(--vault-bg); color:var(--vault-ink); border-color:#BFE0D4}
.k.pub{background:var(--sky-bg); color:var(--sky-ink); border-color:#C7DDF3}

figure{margin:34px 0}
figure svg{width:100%; height:auto; display:block; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px}
figcaption{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-3);
  margin-top:12px; padding-left:14px; border-left:2px solid var(--line-2); line-height:1.5;
}
figcaption b{color:var(--ink-2); font-weight:500}

.analogy{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--vault);
  border-radius:0 12px 12px 0; padding:20px 24px; margin:28px 0;
}
.analogy .tag{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--vault); margin:0 0 8px}
.analogy p{margin:0; font-size:16px; color:var(--ink)}

.mr{display:grid; grid-template-columns:1fr; gap:14px; margin:26px 0}
.mr-card{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.mr-myth{padding:16px 20px 12px; border-bottom:1px dashed var(--line)}
.mr-real{padding:12px 20px 18px}
.mr-row{display:flex; gap:12px; align-items:flex-start}
.mr-ico{flex:0 0 auto; margin-top:2px}
.mr-lab{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:500}
.mr-myth .mr-lab{color:var(--stop)}
.mr-real .mr-lab{color:var(--go)}
.mr-txt{font-size:15.5px; line-height:1.6; margin:3px 0 0}
.mr-txt.dim{color:var(--ink-2)}

.caveat{display:flex; gap:14px; background:var(--warn-bg); border:1px solid #EDD9AC; border-radius:12px; padding:16px 18px; margin:16px 0}
.caveat .cv-ico{flex:0 0 auto; color:var(--warn); margin-top:1px}
.caveat h3{font-family:"Space Grotesk",sans-serif; font-size:16px; margin:0 0 4px; color:var(--warn-ink); font-weight:600}
.caveat p{margin:0; font-size:15px; color:#5C4A28; line-height:1.6}

.takeaway{background:var(--hero); color:#EAEEF5; border-radius:16px; padding:30px; margin:44px 0 20px; text-align:center}
.takeaway .tag{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 12px}
.takeaway p{font-family:"Space Grotesk",sans-serif; font-size:22px; line-height:1.4; margin:0; color:#fff; font-weight:500}
.takeaway p em{font-style:normal; color:var(--accent)}

.sources{border-top:1px solid var(--line); margin-top:48px; padding-top:26px}
.sources h2{font-size:18px; margin-top:0}
.sources ul{list-style:none; padding:0; margin:0}
.sources li{padding:9px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.sources a{color:var(--sky-ink); text-decoration:none; font-weight:500}
.sources a:hover{text-decoration:underline}
.sources span{display:block; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:12px; margin-top:2px}

/* ---- About ---- */
.about{padding:52px 0}
.about h2{font-size:22px; margin-top:36px}
.about p{margin:0 0 18px}
.about .kv{font-family:"IBM Plex Mono",monospace; font-size:13.5px; color:var(--ink-2); line-height:2}
.about .kv b{color:var(--ink); font-weight:500}

/* ---- Footer ---- */
footer{padding:40px 0 60px; border-top:1px solid var(--line); margin-top:40px}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:12.5px}
footer a{color:var(--ink-2); text-decoration:none}
footer a:hover{color:var(--ink)}

@media (min-width:620px){ .mr{grid-template-columns:1fr 1fr} }
@media (max-width:520px){
  body{font-size:16px}
  .hero-inner{padding:52px 20px 44px}
  figure svg{padding:12px}
  h2{font-size:23px}
}