/* ============================================================
   adekoladevops.xyz — design tokens
   Palette: --bg-0 #0F1720 (deep slate) / --bg-1 #16212C (panel)
            --line #26333F (hairline) / --text-0 #E8EAED (primary)
            --text-1 #8FA0AC (secondary) / --amber #D4A24E (status/live)
            --teal #3FA796 (secondary accent) / --red #C4574B (error/down)
   Type: display = 'Space Grotesk', body = 'Inter', utility = 'JetBrains Mono'
   Signature: horizontal pipeline-stage bar (SOURCE→BUILD→PROVISION→DEPLOY→LIVE)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg-0:#0F1720;
  --bg-1:#16212C;
  --bg-2:#1C2A36;
  --line:#26333F;
  --text-0:#E8EAED;
  --text-1:#8FA0AC;
  --text-2:#5A6B78;
  --amber:#D4A24E;
  --teal:#3FA796;
  --red:#C4574B;
  --radius:3px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--bg-0);
  color:var(--text-0);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 0.5em;
  color:var(--text-0);
}

a{color:var(--teal); text-decoration:none;}
a:hover{color:var(--amber);}
a:focus-visible, button:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

code, .mono{font-family:'JetBrains Mono',monospace;}

.wrap{max-width:880px; margin:0 auto; padding:0 24px;}

/* ---------- nav ---------- */
.nav{
  border-bottom:1px solid var(--line);
  padding:20px 0;
  position:sticky; top:0; background:rgba(15,23,32,0.92);
  backdrop-filter:blur(6px);
  z-index:10;
}
.nav .wrap{display:flex; justify-content:space-between; align-items:center;}
.nav .brand{font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--text-0);}
.nav .brand .dot{color:var(--amber);}
.nav .links{display:flex; gap:28px; font-family:'JetBrains Mono',monospace; font-size:13px;}
.nav .links a{color:var(--text-1);}
.nav .links a:hover, .nav .links a.active{color:var(--amber);}

/* ---------- pipeline bar (signature element) ---------- */
.pipeline{
  display:flex;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin:40px 0;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
}
.pipeline .stage{
  flex:1;
  padding:14px 10px;
  text-align:center;
  border-right:1px solid var(--line);
  color:var(--text-2);
  background:var(--bg-1);
  opacity:0;
  transform:translateY(4px);
  animation:stagein 0.5s ease forwards;
  position:relative;
}
.pipeline .stage:last-child{border-right:none;}
.pipeline .stage .num{display:block; color:var(--text-2); margin-bottom:4px;}
.pipeline .stage.live{color:var(--amber); background:var(--bg-2);}
.pipeline .stage.live .num{color:var(--amber);}
.pipeline .stage.live::after{
  content:'';
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--amber); margin-left:6px; vertical-align:middle;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes stagein{to{opacity:1; transform:none;}}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.35;}}
.pipeline .stage:nth-child(1){animation-delay:0.05s;}
.pipeline .stage:nth-child(2){animation-delay:0.15s;}
.pipeline .stage:nth-child(3){animation-delay:0.25s;}
.pipeline .stage:nth-child(4){animation-delay:0.35s;}
.pipeline .stage:nth-child(5){animation-delay:0.45s;}

/* ---------- hero ---------- */
.hero{padding:56px 0 8px;}
.hero .eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--teal);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;
}
.hero h1{font-size:2.2rem; max-width:14ch;}
.hero p.lede{color:var(--text-1); font-size:1.05rem; max-width:52ch; margin-top:14px;}
.hero .cta-row{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.btn{
  font-family:'JetBrains Mono',monospace; font-size:13px;
  padding:10px 16px; border-radius:var(--radius); border:1px solid var(--line);
  color:var(--text-0); display:inline-block;
}
.btn.primary{background:var(--amber); border-color:var(--amber); color:var(--bg-0); font-weight:500;}
.btn.primary:hover{background:#e0b264; color:var(--bg-0);}
.btn:hover{border-color:var(--text-1); color:var(--amber);}

/* ---------- sections / cards ---------- */
section{padding:36px 0;}
.section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:10px;}
.section-head h2{font-size:1.1rem;}
.section-head .tag{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-2);}

.card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; margin-bottom:16px; background:var(--bg-1);
  transition:border-color 0.15s;
}
.card:hover{border-color:var(--teal);}
.card h3{font-size:1.05rem; margin-bottom:6px;}
.card p{color:var(--text-1); margin:0 0 10px; font-size:0.95rem;}
.card .meta{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-2); display:flex; gap:14px; flex-wrap:wrap;}
.stack-chip{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal);
  border:1px solid var(--line); border-radius:2px; padding:2px 7px; margin:2px 4px 2px 0; display:inline-block;
}

/* ---------- article / case-study body ---------- */
article.post{padding:48px 0;}
article.post h2{font-size:1.3rem; margin-top:1.6em;}
article.post p{color:var(--text-1); font-size:1rem;}
article.post .meta-row{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-2); margin-bottom:24px;}
article.post ul{color:var(--text-1);}
article.post pre{
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; overflow-x:auto; font-size:13px;
}
.incident-log{border-left:2px solid var(--red); padding:2px 0 2px 16px; margin:20px 0;}
.incident-log h4{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--red); text-transform:uppercase; letter-spacing:0.05em; margin:0 0 6px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:28px 0; margin-top:40px;}
footer .wrap{display:flex; justify-content:space-between; color:var(--text-2); font-family:'JetBrains Mono',monospace; font-size:12px; flex-wrap:wrap; gap:8px;}
footer a{color:var(--text-1);}

@media (max-width:640px){
  .hero h1{font-size:1.7rem;}
  .pipeline{flex-wrap:wrap;}
  .pipeline .stage{flex:1 1 33%; border-bottom:1px solid var(--line);}
}