/* Shared chrome for /blog/ only. Marketing pages do not load this file. */
:root {
  --ink: #0a0a0a;
  --paper: #fff;
  --stone: #f1f0ec;
  --lime: #eff65a;
  --mute: rgb(10 10 10 / 58%);
  --hair: rgb(10 10 10 / 10%);
  --display: "Inter Tight", "Noto Sans SC", system-ui, sans-serif;
  --body: "Jost", "Noto Sans SC", system-ui, sans-serif;
  --cn: "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body {
  font-family: var(--cn);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
p, h1, h2, h3, ul { margin: 0; }
.wrap { width: min(720px, 100% - 2 * clamp(20px, 5vw, 80px)); margin: 0 auto; }
.wide { width: min(880px, 100% - 2 * clamp(20px, 5vw, 80px)); margin: 0 auto; }

.head { padding: clamp(56px, 8vw, 96px) 0 32px; }
.eyebrow {
  color: var(--mute);
  font: 500 12px/16px var(--body);
  letter-spacing: 0.24em;
  margin-bottom: 16px;
  text-transform: uppercase;
}
h1 {
  font: 600 clamp(32px, 5vw, 52px)/1.15 var(--display);
  letter-spacing: -0.02em;
}
.lede {
  color: var(--mute);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.8;
  margin-top: 16px;
}

.cards { display: grid; gap: 16px; padding: 16px 0 clamp(80px, 10vw, 120px); }
.card {
  background: var(--stone);
  display: block;
  padding: clamp(24px, 3vw, 36px);
  text-decoration: none;
}
.card:hover { outline: 1px solid var(--ink); }
.card time {
  color: var(--mute);
  display: block;
  font: 500 12px/1 var(--body);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.card h2 { font: 600 clamp(22px, 2.4vw, 28px)/1.25 var(--display); }
.card p { color: var(--mute); font-size: 15px; line-height: 1.7; margin-top: 12px; }

.meta {
  color: var(--mute);
  display: flex;
  flex-wrap: wrap;
  font: 500 13px/1.4 var(--body);
  gap: 10px 18px;
  margin: 20px 0 36px;
}
.meta a { text-decoration: underline; text-underline-offset: 3px; }

article h2 {
  font: 600 22px/1.3 var(--display);
  margin: 36px 0 12px;
}
article p, article li {
  font-size: 16px;
  line-height: 1.85;
}
article a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
article p + p { margin-top: 16px; }
article ul { padding-left: 1.2em; }
article li + li { margin-top: 8px; }
article .note {
  border-top: 1px solid var(--hair);
  color: var(--mute);
  font-size: 13px;
  line-height: 1.7;
  margin-top: 40px;
  padding-top: 20px;
}
.faq { margin: 40px 0 8px; }
.faq details {
  border-top: 1px solid var(--hair);
  padding: 16px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details p { color: var(--mute); margin-top: 10px; }

footer {
  background: #000;
  color: rgb(255 255 255 / 40%);
  font-size: 12px;
  line-height: 1.8;
  margin-top: 48px;
  padding: 32px 0 48px;
}
footer .wide { display: grid; gap: 12px; }
footer .brand {
  align-items: center;
  color: #fff;
  display: flex;
  font: 700 14px/1 var(--display);
  gap: 8px;
  letter-spacing: 0.16em;
}
footer .brand i { background: var(--lime); height: 6px; width: 6px; }
footer a { color: rgb(255 255 255 / 70%); }

html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] .card h2 { font-family: var(--cn); }