/* =========================================================
   Guides: one calm reading column for every article, and a tidy index.
   Loaded after styles.css and pages.css, which disagreed with each other
   (70% wide in one, 760px in the other, centring cancelled), so the rules
   here set the layout outright.
   ========================================================= */

:root {
  --a-ink: #111111;
  --a-text: rgba(17, 17, 17, 0.84);
  --a-muted: rgba(17, 17, 17, 0.58);
  --a-line: rgba(17, 17, 17, 0.10);
  --a-cream: #f3efe8;
  --a-pink: #f9e7e7;
  --a-rose: #e3adb4;
  --a-col: 680px;
  --a-serif: "PT Serif", "PT Serif Fallback", "PingFang TC", "Songti TC", Georgia, serif;
  --a-sans: "Satoshi", "Satoshi Fallback", "PingFang TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- an article ---------- */
main.post-wrap { width: auto !important; max-width: none !important; margin: 0 !important; padding: clamp(40px, 7vw, 88px) clamp(16px, 4vw, 40px) clamp(64px, 8vw, 112px) !important; }
.post-wrap .post { position: relative; max-width: var(--a-col) !important; margin: 0 auto !important; }

.post__header { text-align: left !important; padding: 0 0 clamp(28px, 4vw, 40px) !important; margin-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--a-line); }
.post__crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--a-muted); }
.post__crumbs a { color: var(--a-muted); text-decoration: none; }
.post__crumbs a:hover { color: var(--a-ink); text-decoration: underline; text-underline-offset: 3px; }
.post__title { margin: 18px 0 0 !important; font-family: var(--a-serif) !important; font-weight: 400 !important; font-size: clamp(32px, 4.4vw, 48px) !important; line-height: 1.15 !important; letter-spacing: -0.01em; text-wrap: balance; text-align: left !important; }
html[lang^="zh"] .post__title { line-height: 1.3 !important; letter-spacing: 0.01em; }
.post__meta { order: 3; margin: 16px 0 0 !important; font: 400 15px/1.5 var(--a-sans) !important; font-style: normal !important; color: var(--a-muted) !important; text-align: left !important; }
.post__header { display: flex; flex-direction: column; }
.post__header .post__crumbs { order: 1; }
.post__header .post__title { order: 2; }
.post__read { margin-left: 4px; }

.post__body { margin: 0 !important; font-family: var(--a-sans); }
.post__body .post__p, .post__body > p { margin: 0 0 1.25em !important; font-size: 18px !important; line-height: 1.8 !important; color: var(--a-text) !important; text-wrap: pretty; }
html[lang^="zh"] .post__body .post__p { font-size: 17.5px !important; line-height: 1.95 !important; letter-spacing: 0.02em; }
.post__body .post__h2 { position: relative; margin: 2.4em 0 0.7em !important; padding-top: 0; font-family: var(--a-serif) !important; font-weight: 400 !important; font-size: clamp(25px, 2.6vw, 30px) !important; line-height: 1.25 !important; color: var(--a-ink); scroll-margin-top: 110px; text-wrap: balance; }
.post__body .post__h2::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: 16px; border-radius: 2px; background: var(--a-rose); }
.post__body .post__h2:first-child { margin-top: 0.4em !important; }
.post__body .post__h3 { margin: 1.8em 0 0.5em !important; font-family: var(--a-sans) !important; font-weight: 700 !important; font-size: 19px !important; line-height: 1.4 !important; color: var(--a-ink); scroll-margin-top: 110px; }
.post__body .post__list, .post__body ul, .post__body ol { margin: 0 0 1.4em !important; padding-left: 0 !important; list-style: none; font-size: 18px; line-height: 1.75; color: var(--a-text); }
.post__body .post__list li, .post__body ul li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.post__body ul li::before, .post__body .post__list li::before { content: ""; position: absolute; left: 6px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--a-rose); }
.post__body ol { counter-reset: n; }
.post__body ol li { position: relative; padding-left: 34px; margin-bottom: 10px; counter-increment: n; }
.post__body ol li::before { content: counter(n); position: absolute; left: 0; top: 0.15em; width: 24px; height: 24px; border-radius: 50%; background: var(--a-pink); color: var(--a-ink); font: 600 13px/24px var(--a-sans); text-align: center; }
.post__body a { color: var(--a-ink); text-decoration: underline; text-decoration-color: var(--a-rose); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post__body a:hover { text-decoration-color: var(--a-ink); }
.post__body strong, .post__body b { font-weight: 700; color: var(--a-ink); }

/* the short answer near the top, and any quote */
.post__body .post__quote, .post__body blockquote { margin: 1.6em 0 2em !important; padding: 22px 26px !important; border: 0 !important; border-radius: 20px; background: var(--a-cream); font-family: var(--a-sans) !important; font-style: normal !important; font-size: 17px !important; line-height: 1.75 !important; color: var(--a-ink) !important; }
.post__body .post__quote p, .post__body blockquote p { margin: 0 !important; font: inherit !important; color: inherit !important; }

/* tables inside guides */
.post__body table { width: 100%; margin: 1.4em 0 2em; border-collapse: collapse; font-size: 16px; }
.post__body th { text-align: left; font-weight: 600; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--a-ink); }
.post__body td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--a-line); vertical-align: top; }
.post__body .table-scroll, .post__body .post__table { overflow-x: auto; }

/* contents: a sticky list beside the text on wide screens, a folded list on top otherwise */
.post-toc { margin: 0 0 clamp(28px, 4vw, 40px); border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--a-line); }
.post-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; font: 600 15px/1.3 var(--a-sans); }
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 200ms ease; }
.post-toc[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.post-toc ol { list-style: none; margin: 0; padding: 0 20px 16px; counter-reset: t; }
.post-toc li { counter-increment: t; }
.post-toc a { display: grid; grid-template-columns: 28px 1fr; gap: 4px; padding: 7px 0; font-size: 15px; line-height: 1.45; color: var(--a-muted); text-decoration: none; }
.post-toc a::before { content: counter(t, decimal-leading-zero); font: 400 13px/1.6 var(--a-serif); color: var(--a-rose); }
.post-toc a:hover, .post-toc a.is-on { color: var(--a-ink); }
.post__body .post-toc ol { counter-reset: t; }
.post__body .post-toc li { counter-increment: t; padding-left: 0; margin: 0; }
.post__body .post-toc li::before { content: none; display: none; }
.post__body .post-toc a { text-decoration: none; }
.post-toc.is-side { position: absolute; top: 0; right: calc(100% + 56px); width: 230px; height: 100%; margin: 0; background: none; box-shadow: none; border-radius: 0; }
.post-toc__in { position: sticky; top: 110px; }
.post-toc__t { margin: 0 0 12px; font: 600 12px/1.3 var(--a-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-muted); }
.post-toc.is-side ol { padding: 0; border-left: 1px solid var(--a-line); }
.post-toc.is-side a { padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; }
.post-toc.is-side a.is-on { border-left-color: var(--a-rose); }

/* a quiet call after the text */
.post-cta { margin: clamp(40px, 6vw, 56px) 0 0; padding: clamp(24px, 4vw, 32px); border-radius: 24px; background: var(--a-ink); color: #f8f5ef; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.post-cta b { display: block; color: #f8f5ef; font: 400 24px/1.25 var(--a-serif); }
.post-cta > div > span { display: block; margin-top: 6px; font-size: 15px; color: rgba(248,245,239,.7); }
.post-cta a { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: #f8f5ef; color: #111; font: 500 16px/1 var(--a-sans); text-decoration: none; }

.post__share { margin-top: 32px !important; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.post__author { margin-top: 32px !important; border-radius: 20px !important; }
.post__back { display: inline-block; margin-top: 28px; font-size: 15px; color: var(--a-muted); }

@media (max-width: 600px) {
  .post__body .post__p, .post__body > p { font-size: 17px !important; }
  .post__body .post__quote, .post__body blockquote { padding: 18px 20px !important; }
}

/* ---------- the guides index ---------- */
.blog-hero { padding-bottom: 8px !important; }
.blog-hero h1 { font-size: clamp(36px, 5vw, 60px) !important; text-wrap: balance; }
.blog-hero p { max-width: 560px; margin-left: auto; margin-right: auto; }
.blog-tools { padding-bottom: 8px !important; }
.blog-list { padding-top: 16px !important; margin-top: 0 !important; }
.blog-grid { gap: 20px !important; }
.blog-grid .post-card { padding: 24px 24px 22px !important; border: 0 !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 0 0 1px var(--a-line) !important; transition: box-shadow 200ms ease, transform 200ms cubic-bezier(.23,1,.32,1) !important; }
.blog-grid .post-card:hover { transform: translateY(-2px) !important; box-shadow: 0 0 0 1px rgba(17,17,17,.14), 0 14px 32px rgba(17,17,17,.07) !important; }
.blog-grid .post-card__meta { font: 400 13px/1.4 var(--a-sans) !important; font-style: normal !important; color: var(--a-muted) !important; }
.blog-grid .post-card__title { margin: 10px 0 0 !important; font-size: clamp(20px, 1.7vw, 22px) !important; line-height: 1.3 !important; text-wrap: balance; }
.blog-grid .post-card__excerpt { margin-top: 10px !important; font-size: 15px !important; line-height: 1.6 !important; -webkit-line-clamp: 3 !important; }
.blog-grid .post-card__more { margin-top: 14px !important; }
.blog-grid .post-card { display: flex !important; flex-direction: column; }
.blog-grid .post-card__body { display: flex; flex-direction: column; flex: 1; }
.blog-grid .post-card__excerpt { flex: 1; }