/* Blog-only styles. Loaded on /blog pages in addition to renoox.css, which
   supplies the tokens, nav, footer, buttons and card shell used here.
   Kept separate so the design system file stays untouched. */

/* ---------- post cards on the index ---------- */
.posts .post-card{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden}
.post-hit{position:absolute;inset:0;z-index:2}                 /* whole card is the link */
.post-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--cream-2)}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.post-card:hover .post-thumb img{transform:scale(1.04)}
.post-card>:not(.post-thumb):not(.post-hit){margin-inline:26px}
.post-card>.post-meta{margin-top:24px}
.post-card>h3{font-size:20px;margin-top:10px}
.post-card>p{font-size:15px;color:var(--muted);margin-top:10px}
.post-card>.post-more{margin-block:18px 26px}

.post-meta{
  font-size:12px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.post-meta-lg{font-size:13.5px;letter-spacing:.06em;text-transform:none;margin-top:18px}

.post-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;
  font-size:14px;font-weight:500;color:var(--gold-dk);
}
.post-more svg{width:16px;height:16px;transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.post-card:hover .post-more svg{transform:translateX(4px)}

/* ---------- article ---------- */
.post-hero{margin:0 0 40px;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.post-hero img{width:100%;height:auto;display:block}

.prose{font-size:17.5px;line-height:1.75;color:var(--ink-2)}
.prose > * + *{margin-top:1.15em}
.prose h2,.prose h3,.prose h4{
  font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink);
}
.prose h2{font-size:clamp(25px,3vw,33px);margin-top:2em}
.prose h3{font-size:clamp(20px,2.2vw,24px);margin-top:1.7em}
.prose h4{font-size:19px;margin-top:1.5em}
.prose p{margin-top:1.15em}
.prose a{color:var(--gold-dk);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:1.4em;margin-top:1.1em}
.prose li{margin-top:.5em}
.prose li::marker{color:var(--gold-dk)}
.prose img{border-radius:16px;box-shadow:var(--shadow);margin-block:1.8em}
.prose figure{margin:1.8em 0}
.prose figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:10px}
.prose blockquote{
  margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--gold);
  font-family:var(--serif);font-size:1.12em;line-height:1.5;color:var(--ink);
}
.prose blockquote p{margin-top:.6em}
.prose blockquote p:first-child{margin-top:0}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--cream-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;
}
.prose pre{
  background:var(--ink);color:var(--cream);border-radius:14px;padding:20px 22px;
  overflow-x:auto;font-size:14.5px;line-height:1.6;
}
.prose pre code{background:none;border:0;padding:0;color:inherit}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* wide content must scroll inside itself, never widen the page */
.prose .tablewrap,.prose table{display:block;overflow-x:auto;max-width:100%}
.prose table{border-collapse:collapse;font-size:15px;margin-top:1.5em}
.prose th,.prose td{padding:12px 18px;text-align:left;border-bottom:1px solid var(--line)}
.prose thead th{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);background:var(--cream);white-space:nowrap;
}

.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.post-tags span{
  font-size:12.5px;font-weight:500;color:var(--gold-dk);
  background:rgba(227,186,54,.13);border:1px solid rgba(227,186,54,.28);
  border-radius:999px;padding:6px 13px;
}
.post-back{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.post-back a{font-size:15px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .18s}
.post-back a:hover{color:var(--gold-dk)}

/* Chinese-only mode: let Chinese take the parent's size, matching renoox.css */
html[data-lang="cn"] .post-card .cn,html[data-lang="cn"] .prose .cn{font-size:inherit}

@media(max-width:620px){
  .prose{font-size:16.5px}
  .post-card>:not(.post-thumb):not(.post-hit){margin-inline:22px}
  .post-hero{border-radius:16px;margin-bottom:30px}
}

/* ================================================================
   TWO LANGUAGES
   An article is written in one language, so the 双语 / EN / 中文 switcher
   filters the list rather than swapping words inside a post. All of it is
   driven off html[data-lang], the same attribute every other bilingual
   element on the site reads — no JavaScript, and it survives caching.
   ================================================================ */

/* pick one language and the other language's posts drop out */
html[data-lang="en"] .posts .post-card[data-lang="cn"],
html[data-lang="cn"] .posts .post-card[data-lang="en"]{display:none}

/* which language a post is in — only worth saying when both are on screen */
.post-lang{
  display:inline-flex;align-items:center;margin-left:10px;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;padding:3px 9px;
  color:var(--gold-dk);background:rgba(227,186,54,.13);border:1px solid rgba(227,186,54,.3);
}
.post-lang-cn{
  font-family:var(--cn);letter-spacing:.06em;
  color:var(--navy);background:rgba(14,35,64,.07);border-color:rgba(14,35,64,.16);
}
html[data-lang="en"] .posts .post-lang,
html[data-lang="cn"] .posts .post-lang{display:none}   /* one language showing — the badge says nothing */

/* the count line under the index lede */
.post-langhint{
  display:flex;gap:9px;align-items:flex-start;flex-wrap:wrap;
  margin-top:18px;font-size:13.5px;color:var(--muted);line-height:1.55;
}
.post-langhint svg{width:16px;height:16px;flex:none;color:var(--gold-dk);margin-top:3px}
.post-langhint .cn{flex-basis:100%;padding-left:25px;margin-top:-4px}
html[data-lang="cn"] .post-langhint .cn{padding-left:0;flex-basis:auto;margin-top:0}

/* "nothing in your language yet" — rendered always, revealed at most once */
.post-none{display:none;padding:34px 0 8px;max-width:62ch}
html[data-lang="en"] .post-none-en,
html[data-lang="cn"] .post-none-cn{display:block}
.post-none h2{font-size:clamp(22px,2.4vw,30px);margin-top:12px}
.post-none p{font-size:15.5px;color:var(--muted);margin-top:14px;line-height:1.6}
.post-none b{font-weight:600;color:var(--ink-2)}

/* on an article whose language is not the one the reader chose */
.post-langnote{
  display:none;gap:10px;align-items:flex-start;margin-top:18px;
  background:rgba(227,186,54,.09);border:1px dashed rgba(227,186,54,.42);
  border-radius:14px;padding:12px 16px;font-size:13.5px;color:var(--ink-2);line-height:1.55;
}
html[data-lang="en"] .post-langnote-cn,
html[data-lang="cn"] .post-langnote-en{display:flex}
.post-langnote-en span{font-family:var(--cn);font-weight:400}

@media(max-width:620px){
  .post-lang{margin-left:0;margin-top:6px}
  .post-card>.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
}

/* link to the same article in the other language */
.post-twin{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;text-decoration:none;
  font-size:13.5px;font-weight:500;color:var(--gold-dk);
  border:1px solid rgba(227,186,54,.4);border-radius:999px;padding:8px 16px;
  transition:background .18s,border-color .18s;
}
.post-twin:hover{background:rgba(227,186,54,.1);border-color:var(--gold)}
.post-twin svg{width:15px;height:15px;flex:none}