@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:#0d1117;
  --panel:#141b26;
  --line:#232d3d;
  --ink:#e8edf2;
  --ink-dim:#8b97a6;
  --signal:#ff9d3d;
  --signal-dim:#8a5624;
  --signal-soft:#2a1d10;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--signal);}

.top{
  position:relative; border-bottom:1px solid var(--line);
  padding:34px 20px 26px; overflow:hidden;
}
.top::before{
  content:""; position:absolute; top:-140px; left:50%; transform:translateX(-50%);
  width:380px; height:380px; border:1px solid var(--line); border-radius:50%;
}
.top::after{
  content:""; position:absolute; top:-140px; left:50%; transform:translateX(-50%);
  width:260px; height:260px; border:1px solid var(--line); border-radius:50%;
}
.top-inner{position:relative; z-index:1; max-width:680px; margin:0 auto;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--signal); margin:0 0 10px;
}
.brand{
  font-family:'IBM Plex Sans Condensed', sans-serif; font-weight:700;
  font-size:clamp(26px,6vw,34px); text-transform:uppercase; letter-spacing:.01em;
  text-decoration:none; color:var(--ink); display:block; margin:0 0 8px;
}
.tagline{color:var(--ink-dim); font-size:14.5px; max-width:52ch; margin:0;}

main{max-width:680px; margin:0 auto; padding:30px 20px 60px;}

.article-list{list-style:none; margin:0; padding:0;}
.article-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:4px;
  padding:20px 22px; margin-bottom:14px;
}
.article-card:hover{border-color:var(--signal-dim);}
.article-card .tag{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--signal); margin-bottom:8px; display:block;
}
.article-card h2{font-family:'IBM Plex Sans Condensed', sans-serif; font-weight:700; font-size:20px; margin:0 0 8px; text-wrap:balance;}
.article-card p{color:var(--ink-dim); font-size:14px; margin:0;}

article h1{
  font-family:'IBM Plex Sans Condensed', sans-serif; font-weight:700; font-size:clamp(24px,5vw,32px);
  line-height:1.15; margin:0 0 14px; text-wrap:balance;
}
article .meta{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--signal);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:22px;
}
article p{max-width:64ch; font-size:16.5px;}
article h2{
  font-family:'IBM Plex Sans Condensed', sans-serif; font-weight:700; font-size:21px;
  margin:34px 0 12px;
}
article ul,article ol{padding-left:22px; font-size:16.5px;}
article li{margin-bottom:8px;}
article strong{color:var(--signal);}
.callout{
  background:var(--signal-soft); border-left:3px solid var(--signal);
  padding:16px 18px; margin:24px 0; font-size:15.5px; border-radius:2px;
}

.ad-slot{
  margin:32px 0; padding:14px; border:1px dashed var(--line); border-radius:4px;
  text-align:center; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:.08em;
}

footer{
  border-top:1px solid var(--line); padding:24px 20px; text-align:center;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-dim);
}

.back-link{
  display:inline-block; margin-top:38px; font-family:'IBM Plex Mono', monospace;
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--signal);
}