:root{
  --navy:#2D2440;
  --violet:#8B6FC9;
  --lilac:#C5B8E8;
  --ink:#1c1830;
  --muted:#5b5570;
  --bg:#faf9fc;
  --paper:#f2effa;
  --line:#e7e3f0;
  --link:#5f479d;
}

*{box-sizing:border-box}
body.blog-article{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:500 17px/1.72 "Nudica",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.blog-article a{color:var(--link)}
.blog-article a:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.blog-shell{max-width:900px;margin:0 auto;padding:0 22px}
.blog-article .blog-shell>header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:24px 0 4px}
.blog-article .brand{display:flex;align-items:center;gap:10px;font-weight:700}
.blog-article .mark{width:30px;height:30px;flex:0 0 30px}

.article-head{position:relative;display:block;max-width:760px;padding:54px 84px 34px 0;border-bottom:1px solid var(--line)}
.article-head .article-mark{position:absolute;right:8px;top:52px;width:48px;height:48px;transform:rotate(3deg)}
.article-head .article-kicker{margin:0 0 12px;color:var(--link);font:500 22px/1.1 "Marksy","Marker Felt","Bradley Hand","Segoe Print",cursive}
.article-head h1{max-width:19ch;margin:0 0 15px;font-size:clamp(34px,6vw,50px);line-height:1.06;letter-spacing:0}
.article-head .dek{max-width:62ch;margin:0 0 17px;color:#3a3450;font-size:18px;line-height:1.55}
.article-head .byline{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.article-head .byline a{color:var(--muted)}
.article-head .read-meta{display:inline-flex;gap:8px;align-items:center;margin-left:7px;color:var(--link);font-family:"Nudica Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;text-transform:uppercase}

.article-body{max-width:680px;padding:36px 0 4px}
.article-body>p{margin:0 0 20px}
.article-body h2{margin:48px 0 16px;color:var(--navy);font-size:25px;line-height:1.2}
.article-body h2::before{content:"";display:block;width:42px;margin:0 0 12px;border-top:3px solid var(--violet);transform:rotate(-1deg)}
.article-body h3{margin:28px 0 10px;color:var(--navy);font-size:18px;line-height:1.3}
.article-body ul,.article-body ol{display:grid;gap:10px;margin:0 0 22px;padding-left:24px}
.article-body li::marker{color:var(--link);font-weight:700}
.article-body li b{color:var(--ink)}
.article-body .pull{margin:34px 0;padding:4px 0 4px 20px;border-left:3px solid var(--violet);color:var(--link);font:600 30px/1.18 "Marksy","Marker Felt","Bradley Hand","Segoe Print",cursive}
.field-note{margin:30px 0;padding:5px 0 5px 20px;border-left:4px solid var(--violet)}
.field-note .runner{margin:0 0 9px;color:var(--link);font:700 11px/1 "Nudica Mono",ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.field-note p{margin:0;color:#3a3450}
.working-principles{list-style:none!important;margin:28px 0!important;padding:0!important;counter-reset:principle}
.working-principles li{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:18px 0;border-top:1px solid var(--line);counter-increment:principle}
.working-principles li::before{content:counter(principle);color:var(--link);font:600 28px/1 "Marksy","Marker Felt","Bradley Hand","Segoe Print",cursive;transform:rotate(-3deg)}
.working-principles li:nth-child(even)::before{transform:rotate(3deg)}
.working-principles h3{margin:0 0 7px;font-size:18px}
.working-principles p{margin:0;color:var(--muted);font-size:15.5px}
.article-body .sig{margin:34px 0 0;color:var(--link);font:600 24px/1 "Marksy","Marker Felt","Bradley Hand","Segoe Print",cursive}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:48px 0 0;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-nav a{display:block;color:var(--ink);font-weight:700;text-decoration:none}
.post-nav a:last-child{text-align:right}
.post-nav small{display:block;margin-bottom:5px;color:var(--link);font:600 11px/1 "Nudica Mono",ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}
.post-nav a:hover{text-decoration:underline;text-decoration-color:var(--violet);text-underline-offset:4px}

nav.nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:14.5px}
nav.nav a{color:var(--ink);text-decoration:none;font-weight:600}
nav.nav a:hover,nav.nav a[aria-current="page"]{color:var(--link)}
nav.nav .util{display:flex;align-items:center;gap:13px;padding-left:15px;border-left:1px solid var(--line)}
nav.nav .util .ic{display:flex;color:var(--muted)}
nav.nav .util .ic:hover{color:var(--link)}

@media(max-width:680px){
  /* keep the whole nav on one row — logo-only brand, tighter nav */
  .blog-article .brand span{display:none}
  nav.nav{gap:11px;font-size:13px}
  nav.nav .util{gap:10px;padding-left:11px}
  .article-head{padding:40px 54px 28px 0}
  .article-head .article-mark{right:0;top:39px;width:38px;height:38px}
  .article-head h1{font-size:34px}
  .article-head .dek{font-size:17px}
  .article-head .read-meta{display:flex;margin:7px 0 0}
  .article-body{padding-top:30px}
  .article-body h2{font-size:23px}
  .article-body .pull{font-size:27px}
  .working-principles li{grid-template-columns:32px minmax(0,1fr)}
  .post-nav{grid-template-columns:1fr;gap:0}
  .post-nav a{padding:10px 0}
  .post-nav a:last-child{text-align:left;border-top:1px solid var(--line)}
}