:root{
  --bg:        #F8F9FB;
  --surface:   #FFFFFF;
  --ink:       #14181F;
  --ink-soft:  #525A67;
  --ink-faint: #8891A0;
  --line:      #E2E6EC;
  --line-soft: #EDF0F4;
  --accent:    #0E7C86;
  --accent-ink:#0B646C;
  --accent-bg: #E7F3F2;
  --amber:     #B45309;
  --amber-bg:  #FCF1E2;
  --radius:    3px;
  --wrap:      780px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:#fff; }

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

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

h1,h2,h3{ font-family:'Space Grotesk', sans-serif; margin:0; color:var(--ink); }
h1 a{ color:var(--ink); text-decoration:none; }
h1 a:hover{ text-decoration:none; color:var(--accent-ink); }

.mono{ font-family:'IBM Plex Mono', monospace; }

/* ── HERO / HEADER ── */
.hero{
  position:relative;
  padding:56px 0 36px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse 900px 400px at 85% -10%, rgba(14,124,134,0.05), transparent 60%),
    var(--bg);
  overflow:hidden;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin-bottom:14px;
}
.hero h1{
  font-size:clamp(28px, 4.5vw, 40px);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.05;
}
.tagline{
  max-width:560px;
  margin:18px 0 0;
  font-size:16px;
  color:var(--ink-soft);
  line-height:1.7;
}
.contact-row{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  margin-top:22px;
}
.contact-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  font-size:13px;
  color:var(--ink-soft);
  transition:border-color .15s, color .15s;
}
.contact-chip:hover{ border-color:var(--accent); color:var(--accent-ink); text-decoration:none; }
.contact-chip .glyph{ color:var(--accent); font-size:13px; }

/* ── MAIN / SECTIONS ── */
main{ padding-top:36px; padding-bottom:60px; }

.section-head{
  display:flex; align-items:baseline; gap:14px;
  margin-bottom:24px;
}
.section-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent-ink);
  flex-shrink:0;
}
.section-rule{ flex:1; height:1px; background:var(--line); }

.lede{
  font-size:15.5px; color:var(--ink-soft); line-height:1.8;
  max-width:640px;
}

/* ── POST LIST (blog index) ── */
.post-list{ list-style:none; margin:0; padding:0; }
.post-list li{
  padding:20px 0;
  border-top:1px solid var(--line-soft);
}
.post-list li:first-child{ border-top:none; padding-top:0; }
.post-list a{
  font-family:'Space Grotesk', sans-serif;
  font-size:18px;
  font-weight:600;
  color:var(--ink);
}
.post-list a:hover{ color:var(--accent-ink); text-decoration:none; }
.post-date{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-faint);
  margin-top:4px;
}
.post-list p{
  font-size:14px;
  color:var(--ink-soft);
  margin:8px 0 0;
  line-height:1.7;
}

/* ── SINGLE POST ── */
article.post h1{
  font-size:clamp(26px, 4vw, 34px);
  margin-bottom:6px;
}
article.post .post-date{ margin-bottom:28px; }
article.post{
  font-size:15.5px;
  color:var(--ink-soft);
  line-height:1.8;
}
article.post h2{
  font-size:19px;
  font-weight:600;
  color:var(--ink);
  margin:36px 0 12px;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
}
article.post p{ margin:0 0 16px; }
article.post a{ color:var(--accent-ink); }
article.post img,
article.post lite-youtube{
  max-width:100%;
  margin:20px 0;
  border-radius:var(--radius);
  border:1px solid var(--line);
}
article.post code{
  font-family:'IBM Plex Mono', monospace;
  background:var(--accent-bg);
  color:var(--accent-ink);
  padding:0.15em 0.4em;
  border-radius:var(--radius);
  font-size:0.88em;
}
article.post pre{
  background:var(--ink);
  color:#e5e9ee;
  padding:16px 18px;
  border-radius:var(--radius);
  overflow-x:auto;
  font-size:13.5px;
}
article.post pre code{ background:none; color:inherit; padding:0; }
article.post ul, article.post ol{ padding-left:1.3em; }
article.post li{ margin-bottom:8px; }

/* ── FOOTER ── */
footer{ padding:28px 0 48px; border-top:1px solid var(--line); }
footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; color:var(--ink-faint); letter-spacing:0.5px;
}

@media (max-width:640px){
  .hero{ padding:40px 0 28px; }
}