/* Public blog. Same tokens as the static site, so /blog is not a second
   website wearing similar clothes. */
:root{
  --paper:#F4F6F8; --paper-lift:#FAFBFC; --paper-pure:#fff; --paper-deep:#E7EBEF;
  --ink:#131A22; --ink-2:#3D4A56; --ink-3:#64707C;
  --rule:#BDCAD6; --rule-soft:#D6E0E9;
  --accent:#5E2C86; --accent-dim:#4C2270;
  --deep:#2D1445; --deep-lift:#3A1C57; --on-deep:#fff; --on-deep-2:#E7E1EF; --on-deep-3:#BCAFCC;
  --serif:'Newsreader','Iowan Old Style',Georgia,serif;
  --sans:'Switzer',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --eth:'Noto Sans Ethiopic','Switzer',ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1); --r:22px;
  --s2:.7rem; --s3:1.15rem; --s4:1.9rem; --s5:3.1rem; --s6:5rem;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:1.06rem;line-height:1.58;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.014em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{width:min(100% - 2.5rem,78rem);margin-inline:auto}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}
.mono{font-variant-numeric:tabular-nums}
.note{font-size:.78rem;color:var(--ink-3)}
.muted{color:var(--ink-3)}
.link{color:var(--accent);text-decoration:underline;text-underline-offset:.22em}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.4rem;border-radius:999px;
  border:1px solid transparent;font:inherit;font-size:.9rem;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background-color .18s var(--ease),border-color .18s var(--ease)}
.btn--primary{background:var(--deep);color:#fff;font-weight:600}
.btn--primary:hover{background:var(--deep-lift)}
.btn--ghost{border-color:rgba(45,20,69,.22);color:var(--deep);background:rgba(255,255,255,.7)}
.btn--ghost:hover{border-color:var(--deep);background:#fff}

/* nav */
.nav{position:sticky;top:.75rem;z-index:40;width:min(100% - 2.5rem,78rem);margin:.75rem auto 0;
  border-radius:999px;box-shadow:0 2px 6px rgba(45,20,69,.16),0 14px 34px rgba(45,20,69,.18);
  background:radial-gradient(90% 300% at 4% 0%,rgba(139,92,196,.38),transparent 60%),
             linear-gradient(100deg,#3A1A58 0%,#2D1445 46%,#26113C 100%)}
.nav__in{display:flex;align-items:center;gap:var(--s4);min-height:3.9rem;padding-inline:1.15rem .55rem}
.nav__id{text-decoration:none;margin-right:auto;display:grid;grid-template-columns:auto auto;
  grid-template-rows:auto auto;justify-content:start;align-items:center;column-gap:.62rem}
.nav__id img{grid-row:1/3;filter:brightness(0) invert(1)}
.nav__name{grid-column:2;align-self:end;font-family:var(--serif);font-size:1.04rem;color:#fff}
.nav__role{grid-column:2;align-self:start;font-size:.78rem;color:var(--on-deep-3)}
.nav__list{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0;font-size:.9rem}
.nav__list a{text-decoration:none;color:var(--on-deep-2);padding-bottom:2px;border-bottom:1px solid transparent}
.nav__list a:hover,.nav__list a[aria-current]{color:#fff;border-color:rgba(255,255,255,.55)}
.nav__cta{background:#fff;color:var(--deep);border-radius:999px;padding:.62rem 1.15rem;font-weight:600;flex:none}
.nav__cta-short{display:none}
@media(max-width:900px){.nav__list{display:none}}
@media(max-width:640px){.nav__cta-long{display:none}.nav__cta-short{display:inline}.nav__role{display:none}}

.section{padding-block:var(--s6)}
.sec-head{margin-bottom:var(--s4)}
.sec-head h1,.sec-head h2{font-size:clamp(2.1rem,3.4vw,3.1rem);letter-spacing:-.03em}
.sec-head h1::after,.sec-head h2::after{content:'';display:block;width:2.4rem;height:3px;background:var(--accent);margin-top:var(--s3)}
.lede{font-size:1.36rem;line-height:1.5;color:var(--ink-2);max-width:40rem}

/* filters */
.filters{display:flex;gap:.6rem;align-items:center;margin:var(--s4) 0 var(--s3);flex-wrap:wrap}
.filters__input{flex:1 1 16rem;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--rule);
  font:inherit;font-size:.92rem;background:#fff}
.filters__clear{font-size:.85rem;color:var(--ink-3)}
.taglist{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0 0 var(--s5)}
.tagpill{display:inline-block;font-size:.78rem;padding:.3rem .8rem;border-radius:999px;
  text-decoration:none;color:var(--accent);border:1px solid rgba(94,44,134,.28);background:#fff}
.tagpill.is-on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* list */
.posts{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}
.post{background:rgba(255,255,255,.9);border-radius:var(--r);overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 1px 2px rgba(19,26,34,.05),0 10px 28px rgba(19,26,34,.07);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.post:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 2px 6px rgba(19,26,34,.07),0 18px 40px rgba(19,26,34,.1)}
.post__shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.post__body{padding:var(--s3) var(--s4) var(--s4)}
.post__meta{font-size:.78rem;color:var(--ink-3)}
.post__dot{margin-inline:.4rem}
.post__src{color:var(--accent);font-weight:600}
.post__title{font-size:1.24rem;margin-top:.3rem;line-height:1.25}
.post__title a{text-decoration:none}
.post__title a:hover{color:var(--accent)}
.post__excerpt{font-size:.9rem;color:var(--ink-2);margin-top:var(--s2)}
.post__tags{margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:.4rem}
.post__tags a{font-size:.72rem;color:var(--ink-3);text-decoration:none;border:1px solid var(--rule-soft);
  padding:.15rem .55rem;border-radius:999px}
.empty{color:var(--ink-3);padding-block:var(--s5)}

.pager{margin-top:var(--s5)}
.pager nav{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;font-size:.9rem}
.pager a,.pager span{padding:.45rem .8rem;border-radius:999px;text-decoration:none;border:1px solid var(--rule-soft)}
.pager [aria-current]{background:var(--deep);color:#fff;border-color:var(--deep)}
.pager svg{width:1rem;height:1rem}

/* article */
.article__in{max-width:44rem}
.article__back{font-size:.85rem;margin-bottom:var(--s3)}
.article__back a{color:var(--accent)}
.article__title{font-size:clamp(2rem,4vw,2.9rem);letter-spacing:-.028em}
.article__meta{font-size:.85rem;color:var(--ink-3);margin-top:var(--s2)}
.article__origin{margin-top:var(--s3);padding:.7rem 1rem;border-radius:12px;font-size:.88rem;
  background:rgba(94,44,134,.07);border-left:3px solid var(--accent)}
.article__cover{margin:var(--s4) 0}
.article__cover img{border-radius:var(--r)}
.prose{margin-top:var(--s4);font-size:1.08rem;line-height:1.72}
.prose > * + *{margin-top:1.1em}
.prose h1,.prose h2,.prose h3{margin-top:1.8em;line-height:1.2}
.prose h1{font-size:1.7rem}.prose h2{font-size:1.42rem}.prose h3{font-size:1.18rem}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.prose blockquote{margin-left:0;padding-left:var(--s3);border-left:3px solid var(--accent);color:var(--ink-2)}
.prose ul,.prose ol{padding-left:1.3rem}
.prose li + li{margin-top:.35em}
.prose img{border-radius:12px;margin-block:1.4em}
.prose pre{background:var(--paper-deep);padding:1rem;border-radius:12px;overflow:auto;font-size:.9rem}
.article__tags{margin-top:var(--s5);display:flex;gap:.4rem;flex-wrap:wrap}
.article__tags a{font-size:.78rem;color:var(--accent);text-decoration:none;
  border:1px solid rgba(94,44,134,.28);padding:.22rem .7rem;border-radius:999px}
.article__cta{margin-top:var(--s5)}
.related{margin-top:var(--s6);border-top:1px solid var(--rule-soft);padding-top:var(--s4)}
.related h2{font-size:1.2rem}
.related ul{list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;gap:.6rem}
.related a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-soft);padding-bottom:.4rem;display:block}
.related a:hover{color:var(--accent)}

/* footer */
.foot{background:radial-gradient(70% 120% at 6% 0%,rgba(139,92,196,.3),transparent 62%),
      linear-gradient(160deg,#351857 0%,#2D1445 48%,#240F39 100%);
  color:var(--on-deep);border-radius:28px 28px 0 0;margin-top:var(--s5);padding:var(--s6) 0 var(--s5)}
.foot__in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--s5) var(--s4);align-items:start}
.foot__sig{width:min(100%,19rem);height:auto;filter:brightness(0) invert(1);opacity:.94}
.foot__role{font-size:.9rem;color:var(--on-deep-2);margin-top:var(--s3)}
.foot__col h2{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--on-deep-3);margin-bottom:var(--s3)}
.foot__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9rem}
.foot__list a{color:var(--on-deep-2);text-decoration:none}
.foot__list a:hover{color:#fff}
.foot .link{color:#E8D9F0}
.foot__legal{margin-top:var(--s5);border-top:1px solid rgba(255,255,255,.18);padding-top:var(--s3)}
.foot .note{color:rgba(255,255,255,.52)}
@media(max-width:900px){.foot__in{grid-template-columns:1fr 1fr}.foot__in>div:first-child{grid-column:span 2}}
@media(max-width:640px){.section{padding-block:var(--s5)}.foot__in{grid-template-columns:1fr}.foot__in>div:first-child{grid-column:span 1}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important}}

/* Trix writes images as <figure> with a <figcaption>, so captions typed in the
   editor come through to the page as real captions. */
.prose figure{margin:1.6em 0}
.prose figure img{border-radius:12px;width:100%;height:auto}
.prose figcaption{font-size:.82rem;color:var(--ink-3);margin-top:.6rem;text-align:center}
.prose .attachment--preview{margin:1.6em 0}
.prose .attachment__caption{font-size:.82rem;color:var(--ink-3);text-align:center;display:block;margin-top:.6rem}

/* Shown only to a signed-in author looking at unpublished work. */
.previewbar{background:#FEF3E2;border:1px solid #F6D9AE;color:#7C3A05;
  border-radius:12px;padding:.7rem 1rem;margin-bottom:1.4rem;font-size:.9rem}
.previewbar a{margin-left:.4rem}


/* Amharic setting. The Latin faces have no Ethiopic glyphs, so without this a
   post in Amharic falls back to whatever the device happens to have. The tight
   Latin tracking also closes up syllables and the tight leading clips their
   ascenders, so both are reset — the same treatment the main site gives it. */
[lang="am"], [lang="am"] * { font-family: var(--eth); letter-spacing: 0; }
[lang="am"] { line-height: 1.75; }
.prose[lang="am"] { line-height: 1.9; }
.prose[lang="am"] h1, .prose[lang="am"] h2, .prose[lang="am"] h3 { line-height: 1.35; }
h1[lang="am"], h2[lang="am"] { line-height: 1.3; letter-spacing: 0; }