/* The iLang Journal: the blog's own pieces. Palette, type and the page chrome come from /assets/site.css. */
:root{--f-text:"Sitka Text","Iowan Old Style","Palatino Linotype",Palatino,"Noto Serif",Georgia,"Noto Serif SC","Songti SC",serif}
.journal,.essay{padding-bottom:clamp(64px,8vw,128px)}
.journal a,.essay a{transition:color .2s}

/* ---------- the head of a blog page ---------- */
.b-eyebrow,.art-eyebrow{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;color:var(--seal-text);margin-bottom:clamp(14px,1.8vw,22px);font-variant-ligatures:none}
.b-topics{margin-top:clamp(36px,5vw,64px);font-family:var(--f-num);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.b-topics a{color:var(--ink-2);display:inline-flex;align-items:center;gap:10px;padding:8px 0}
.b-topics a::after{content:"→";transition:transform .35s var(--ease)}
.b-topics a:hover{color:var(--seal-text)}
.b-topics a:hover::after{transform:translateX(5px)}

/* ---------- the featured essay ---------- */
.featured{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border:1px solid var(--rule);border-radius:20px;overflow:hidden;background:var(--raise);position:relative;transition:border-color .4s}
.featured:hover{border-color:var(--seal)}
.featured .f-text{padding:clamp(26px,4vw,64px);display:flex;flex-direction:column;align-items:flex-start}
.ftag{font-family:var(--f-num);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--seal-text);border:1px solid var(--seal);border-radius:999px;padding:4px 12px;margin-bottom:clamp(18px,2.4vw,30px)}
.featured h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,3.3vw,3.1rem);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.featured h2 a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}
.featured .quote{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.08rem,1.5vw,1.34rem);line-height:1.45;color:var(--ink-2);margin-top:clamp(16px,2vw,26px);padding-left:18px;border-left:2px solid var(--seal)}
.featured .meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-family:var(--f-num);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:auto;padding-top:clamp(22px,3vw,40px)}
.read-btn{position:relative;display:inline-flex;align-items:center;margin-top:20px;height:48px;padding:0 22px;border-radius:12px;background:var(--ink);color:var(--paper);font-weight:650;font-size:.95rem;transition:transform .35s var(--ease),background .3s,color .3s}
.featured:hover .read-btn{transform:translateY(-2px);background:var(--seal);color:var(--on-seal)}
.featured .visual{background:var(--sunk);border-left:1px solid var(--rule);display:grid;place-items:center;padding:clamp(16px,2vw,28px)}
.featured .visual svg{width:100%;max-width:440px;height:auto;overflow:visible}
.visual .c{stroke:var(--ink)}
.visual .si{stroke:var(--seal)}
.visual .bond{stroke:var(--ink-3)}
.visual .orbit{opacity:.45;stroke-dasharray:2 7}
.visual .c .dot{fill:var(--ink);stroke:none}
.visual .si .dot{fill:var(--seal);stroke:none}
.visual text{font-family:var(--f-mono)}
.visual .c-t{fill:var(--ink)}
.visual .si-t{fill:var(--seal-text)}
.visual .cap-t{fill:var(--ink-3);font-family:var(--f-num)}
@keyframes turn{to{transform:rotate(360deg)}}
.anim .visual .orbit{transform-box:fill-box;transform-origin:center;animation:turn 80s linear infinite}
.anim .visual .si .orbit{animation-duration:110s;animation-direction:reverse}

/* ---------- lists of essays ---------- */
.posts-list{border-top:1px solid var(--rule);margin-top:var(--sec-gap)}
.posts-list:first-child{margin-top:0}
.featured+.posts-list .post-card:last-child,.posts-list:has(+.soon) .post-card:last-child{border-bottom:0}
.post-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--rule);transition:background .3s}
.post-meta{font-family:var(--f-num);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums}
.post-card h2{font-family:var(--f-serif);font-weight:700;font-size:clamp(1.36rem,2.1vw,1.9rem);line-height:1.14;letter-spacing:-.014em;text-wrap:balance}
.post-card h2 a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}
.post-card h2 a{transition:color .25s}
.post-card:hover h2 a{color:var(--seal-text)}
.post-excerpt{color:var(--ink-2);max-width:44em;line-height:1.6}
.read-more{font-family:var(--f-num);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:4px;transition:color .25s,transform .35s var(--ease);justify-self:start}
.post-card:hover .read-more{color:var(--seal-text);transform:translateX(5px)}
@media (min-width:1100px){
  .post-card{grid-template-columns:var(--cols);column-gap:var(--col-gap);row-gap:8px}
  .post-card>*{grid-column:2}
  .post-card>.post-meta{grid-column:1;grid-row:1/span 3;padding-top:.5em}
}

/* ---------- coming soon ---------- */
.soon{margin-top:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;border-top:1px solid var(--rule);padding-top:var(--sec-pad)}
.sec-label{font-family:var(--f-serif);font-weight:700;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.14;letter-spacing:-.014em;color:var(--ink);margin:0;text-transform:none}
.upcoming{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.up-card{display:flex;flex-direction:column;gap:14px;border:1px dashed var(--rule);border-radius:14px;padding:22px 20px;transition:border-color .3s,transform .5s var(--ease),background .3s}
.up-card:hover{border-color:var(--seal);border-style:solid;transform:translateY(-3px);background:var(--raise)}
.up-card .badge{font-family:var(--f-num);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.up-card h3{font-family:var(--f-serif);font-weight:600;font-size:1.18rem;line-height:1.25;text-wrap:balance}
@media (min-width:1100px){.soon{grid-template-columns:var(--cols);column-gap:var(--col-gap)}}
@media (max-width:820px){
  .featured{grid-template-columns:minmax(0,1fr)}
  .featured .visual{border-left:0;border-top:1px solid var(--rule);order:-1}
  .featured .visual svg{max-width:300px}
  .upcoming{grid-template-columns:minmax(0,1fr)}
}

/* ---------- topics ---------- */
.tags-cloud{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--rule);padding-top:var(--sec-pad)}
.tag-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:999px;padding:8px 8px 8px 16px;font-size:.95rem;color:var(--ink);transition:border-color .3s,background .3s,transform .4s var(--ease)}
.tag-pill:hover{border-color:var(--seal);background:var(--raise);transform:translateY(-2px)}
.tag-count{font-family:var(--f-num);font-size:.76rem;min-width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:var(--seal-wash);color:var(--seal-text);padding:0 7px}
.back-link{font-family:var(--f-num);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:clamp(14px,1.8vw,22px);justify-self:start;text-decoration:none!important}
.back-link:hover{color:var(--seal-text)}
.tag-term-count{font-family:var(--f-num);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
@media (min-width:1100px){.tags-page .tags-cloud{margin-left:calc((100% - var(--col-gap)) * .29204 + var(--col-gap))}}

/* ---------- an essay ---------- */
.art-byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:clamp(20px,2.6vw,36px);font-size:.95rem;color:var(--ink-3)}
.art-byline .who{color:var(--ink);font-weight:650}
.av{width:22px;height:22px;border-radius:6px;background:var(--seal);flex:none;position:relative}
.av::before,.av::after{content:"";position:absolute;top:6px;bottom:6px;width:4px;border:1.5px solid var(--on-seal)}
.av::before{left:5px;border-right:0}
.av::after{right:5px;border-left:0}
.tag-link-sm{color:var(--ink-2)}
.art-layout{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule);padding-top:var(--sec-pad)}
.toc{display:none}
.art-main{min-width:0}
.art-body{font-family:var(--f-text);font-size:clamp(1.1rem,1.22vw,1.2rem);line-height:1.75;color:var(--ink);max-width:39em}
.art-body>*:first-child{margin-top:0}
.art-body p{margin:0 0 1.2em;text-wrap:pretty}
.art-body h1{font-family:var(--f-serif);font-size:1.7em;line-height:1.15;margin:1.6em 0 .6em}
.art-body>.abstract+h1,.art-body>h1:first-child{display:none}
.art-body h2{font-family:var(--f-serif);font-weight:700;font-size:clamp(1.55rem,2.3vw,2.05rem);line-height:1.15;letter-spacing:-.014em;margin:2.1em 0 .7em;text-wrap:balance;scroll-margin-top:calc(var(--nav-h) + 24px)}
.art-body h3{font-family:var(--f-serif);font-weight:700;font-size:1.28em;line-height:1.25;margin:1.8em 0 .6em;scroll-margin-top:calc(var(--nav-h) + 24px)}
.art-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--seal);text-decoration-thickness:1px;text-underline-offset:3px}
.art-body a:hover{color:var(--seal-text)}
.art-body strong{font-weight:700}
.art-body blockquote{margin:1.7em 0;padding:.1em 0 .1em 1.2em;border-left:2px solid var(--seal);font-style:italic;font-size:1.1em;line-height:1.55}
.art-body blockquote p:last-child{margin-bottom:0}
.art-body ul,.art-body ol{margin:0 0 1.2em 1.3em}
.art-body li{margin:.35em 0;padding-left:.2em}
.art-body li::marker{color:var(--seal-text)}
.art-body code{font-family:var(--f-mono);font-size:.8em;background:var(--seal-wash);padding:2px 6px;border-radius:5px;font-variant-ligatures:none;overflow-wrap:anywhere}
.art-body pre{background:var(--code)!important;color:var(--code-ink);padding:20px 22px;border-radius:12px;border:1px solid var(--rule-soft);overflow-x:auto;font-size:.78rem;line-height:1.65;margin:1.6em 0;tab-size:2}
.art-body pre code{background:none;padding:0;font-size:1em;color:inherit;overflow-wrap:normal;border-radius:0}
.art-body img{max-width:100%;height:auto;border-radius:10px}
.art-body hr{border:0;height:11px;width:120px;margin:2.6em 0;
  background:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 8px) 0 0/100% 5px no-repeat,
             repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 40px) 0 0/100% 11px no-repeat;border-top:1px solid var(--rule)}
.art-body table{width:100%;border-collapse:collapse;font-family:var(--f-sans);font-size:.92rem;line-height:1.5;margin:1.6em 0}
.art-body th{text-align:left;padding:10px 14px 10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-family:var(--f-num);font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.art-body td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.art-body .abstract{font-family:var(--f-sans);font-size:.88rem;line-height:1.6;color:var(--ink-2);border:1px solid var(--rule);border-left:3px solid var(--seal);border-radius:8px;background:var(--raise);padding:16px 20px;margin-bottom:2.2em}
.art-body .abstract p{margin:0}
.art-body .abstract p>strong:not(:first-child)::before{content:"\A";white-space:pre}
.art-body .abstract strong{font-family:var(--f-num);font-weight:500;font-size:.86em;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:.3em}
.art-body .abstract a{text-decoration-color:var(--rule)}
.art-body .lead{font-size:1.14em;line-height:1.6}
.art-body .katex-display{overflow-x:auto;overflow-y:hidden;padding:.5em 0}
/* the first paragraph opens with a raised capital */
.art-body>p:first-of-type::first-letter{font-family:var(--f-display);font-weight:700;font-size:3.4em;line-height:.8;float:left;margin:.1em .05em 0 -.02em;color:var(--ink)}
@media (min-width:1100px){
  .art-layout{grid-template-columns:var(--cols);column-gap:var(--col-gap);align-items:start}
  .toc{display:block;position:sticky;top:calc(var(--nav-h) + 28px);max-height:calc(100vh - var(--nav-h) - 56px);overflow-y:auto;scrollbar-width:thin;padding-bottom:8px}
  .toc h4{font-family:var(--f-num);font-weight:500;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
  .toc ul{list-style:none}
  .toc a{display:block;padding:6px 0 6px 14px;border-left:1px solid var(--rule);font-size:.9rem;line-height:1.35;color:var(--ink-3);transition:color .2s,border-color .2s,box-shadow .2s}
  .toc li li a{padding-left:28px;font-size:.84rem}
  .toc a:hover{color:var(--ink)}
  .toc a.cur{color:var(--ink);border-left-color:var(--seal);box-shadow:inset 1px 0 0 var(--seal)}
}

/* ---------- after an essay ---------- */
.art-end{margin-top:var(--sec-gap)}
.art-author,.related-posts,.comments{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;border-top:1px solid var(--rule);padding:var(--sec-pad) 0 clamp(28px,3.6vw,52px)}
.art-author{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px}
.art-author .av{width:40px;height:40px;border-radius:10px;margin-top:2px}
.art-author .av::before,.art-author .av::after{top:11px;bottom:11px;width:7px;border-width:2px}
.art-author .av::before{left:10px}
.art-author .av::after{right:10px}
.bio b{font-weight:650}
.bio p{color:var(--ink-2);max-width:40em;margin-top:2px}
.art-end h4{font-family:var(--f-serif);font-weight:700;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.14;letter-spacing:-.014em}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.rel-card{display:flex;flex-direction:column;gap:12px;background:var(--raise);border:1px solid var(--rule);border-radius:14px;padding:22px 20px;transition:border-color .3s,transform .5s var(--ease)}
.rel-card:hover{border-color:var(--seal);transform:translateY(-3px)}
.rel-card .k{font-family:var(--f-mono);font-size:.74rem;color:var(--seal-text);font-variant-ligatures:none}
.rel-card h5{font-family:var(--f-serif);font-weight:700;font-size:1.2rem;line-height:1.22;text-wrap:balance}
.giscus-slot{min-height:300px;max-width:820px}
.no-js .comments{display:none}
@media (min-width:1100px){
  .related-posts,.comments{grid-template-columns:var(--cols);column-gap:var(--col-gap)}
  .art-author{grid-template-columns:var(--cols);column-gap:var(--col-gap)}
  .art-author .av{justify-self:start}
}
@media (max-width:640px){.related-grid{grid-template-columns:minmax(0,1fr)}}