/* The blog (Scripts/blog-build.mjs), on top of site.css: a reading column on white, the characters' own speech bubbles
   for their lines, the shelf for a few of them, and cards on light grey to the next post. Same tokens, no new colours. */

/* ------------------------------------------------------------------ a post */
.post__in { max-width: 760px; padding-top: 72px; padding-bottom: 96px; }
.post__head h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -.04em; }
.post__head .lead { margin: 20px 0 0; max-width: none; }
.post__meta { display: flex; gap: 10px; margin-top: 18px; color: var(--muted); font-size: 14px; font-weight: 500; }

.post__toc { margin-top: 40px; padding: 22px 26px; border-radius: 18px; background: var(--gallery); }
.post__toc p { color: var(--ink); font-size: 14px; font-weight: 600; }
.post__toc ol { margin: 10px 0 0; padding-left: 20px; columns: 2 260px; column-gap: 32px; }
.post__toc li { margin: 0; padding: 3px 0 3px 2px; font-size: 15px; line-height: 1.45; break-inside: avoid; }
.post__toc li::marker { color: var(--muted); font-size: 13px; }
.post__toc a { color: var(--body); text-decoration: none; }
.post__toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.post__body { margin-top: 44px; font-size: 18px; line-height: 1.7; }
.post__body > p + p, .post__body > p + ul, .post__body > p + ol, .post__body > ul + p, .post__body > ol + p { margin-top: 18px; }
.post__body h2 { margin: 56px 0 14px; font-size: clamp(25px, 2.6vw, 30px); line-height: 1.18; letter-spacing: -.03em; scroll-margin-top: 90px; }
.post__body h3 { margin: 36px 0 10px; font-size: 21px; line-height: 1.3; letter-spacing: -.02em; scroll-margin-top: 90px; }
.post__body h2 + p, .post__body h3 + p { margin-top: 0; }
.post__body ul, .post__body ol { margin: 14px 0 0; padding-left: 24px; }
.post__body li { margin: 10px 0; padding-left: 4px; }
.post__body li::marker { color: var(--muted); }
.post__body strong { color: var(--ink); font-weight: 600; }
.post__body a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(41, 87, 245, .35); }
.post__body a:hover { text-decoration-color: currentColor; }
.post__body code { padding: 2px 6px; border-radius: 6px; background: var(--gallery); color: var(--ink); font: 500 .86em/1 var(--mono); }

/* a tip: "> " in the Markdown */
.tip { margin: 28px 0; padding: 20px 24px; border-radius: 16px; background: var(--blue-soft); color: var(--ink-2); }
.tip p + p { margin-top: 10px; }
.tip strong { color: var(--ink); }

/* a table */
.table { margin: 28px 0; overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.table th, .table td { padding: 12px 16px; text-align: left; vertical-align: top; }
.table th { background: var(--gallery); color: var(--ink); font-size: 14px; font-weight: 600; }
.table tr + tr td, .table tbody tr:first-child td { box-shadow: inset 0 1px 0 var(--line); }

/* a character's line, {{say}}: its face, and its bubble pointing back at it */
.say { display: flex; align-items: center; gap: 20px; margin: 36px 0; }
.say__pal { flex: none; width: 112px; }
.say__pal img { width: 112px; height: 112px; }
.say__talk { min-width: 0; }
.say__bubble { position: relative; display: inline-block; max-width: 460px; padding: 14px 20px; border-radius: 18px; background: #fff; color: var(--ink); font: 600 17px/1.38 var(--round); letter-spacing: -.01em;
  box-shadow: 0 0 0 1px rgba(15, 20, 36, .06), 0 2px 4px rgba(15, 20, 36, .05), 0 14px 28px -12px rgba(15, 20, 36, .22); }
.say__bubble::before { content: ""; position: absolute; top: 50%; right: 100%; width: 9px; height: 18px; margin-top: -9px; background: #fff; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.say__name { display: block; margin-bottom: 4px; color: var(--blue); font: 700 10px/1.2 var(--round); letter-spacing: .085em; text-transform: uppercase; }
.say__when { margin-top: 10px; padding-left: 4px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.say__when a { color: var(--body); text-decoration: none; font-weight: 600; }
.say__when a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.say__when b { color: var(--ink); font-weight: 600; }

/* a few characters, {{pals}} */
.shelf { margin: 8px 0 44px; }
.shelf .pals__grid { justify-content: flex-start; margin-top: 40px; }
/* the tiles are links: they keep the shelf's own look, not the article's underlined blue */
.post__body .shelf a { color: inherit; text-decoration: none; }
@media (min-width: 761px) {
  .shelf .pal, .shelf .pal--s, .shelf .pal--l { --w: 148px; }
}

/* the closing card */
.post__cta { display: flex; align-items: center; gap: 28px; margin-top: 64px; padding: 32px 34px; border-radius: 24px; background: var(--gallery); }
.post__cta-pal { flex: none; width: 132px; }
.post__cta-pal img { width: 132px; height: 132px; }
.post__cta h2 { font-size: 26px; line-height: 1.15; letter-spacing: -.03em; }
.post__cta-text > p { margin-top: 10px; font-size: 16px; line-height: 1.55; }
.post__cta .actions { margin-top: 20px; }
.post__cta .price-line { margin-top: 14px; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------------ cards: the index and "More on" */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; }
.card a { display: flex; gap: 16px; height: 100%; padding: 18px 20px 20px 14px; border-radius: 18px; background: #fff; color: inherit; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(15, 20, 36, .05), 0 1px 2px rgba(15, 20, 36, .04); transition: box-shadow .16s ease, transform .16s ease; }
.card a:hover { box-shadow: 0 0 0 1px rgba(15, 20, 36, .07), 0 2px 4px rgba(15, 20, 36, .05), 0 16px 30px -16px rgba(15, 20, 36, .28); transform: translateY(-2px); }
.card__pal { flex: none; width: 64px; }
.card__pal img { width: 64px; height: 64px; }
.card__text { display: flex; flex-direction: column; min-width: 0; }
.card__cat { color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.card__title { margin-top: 4px; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.card__desc { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.post__more .cards { margin-top: 32px; }
.blog__cat .card__cat { display: none; }
.blog__cat h2 a { color: inherit; text-decoration: none; }
.blog__cat h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.blog__top .crumbs { margin-bottom: 18px; }
.blog__others { padding: 64px 0 104px; }
.blog__others h2 { font-size: clamp(22px, 2.4vw, 28px); }
.blog__others .blog__cats { margin-top: 20px; }
/* a character page's "Read about" cards */
.pal-reads h2 { font-size: clamp(26px, 3vw, 36px); }
.pal-reads .cards { margin-top: 32px; }

.blog__top { padding: 80px 0 24px; }
.blog__top h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.04; letter-spacing: -.04em; }
.blog__top .lead { max-width: 640px; }
.blog__cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.blog__cats a { padding: 7px 14px; border-radius: 99px; background: var(--gallery); color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .12s ease; }
.blog__cats a:hover { background: var(--line); }
.blog__cat { padding: 56px 0; scroll-margin-top: 40px; }
.blog__cat:nth-child(even) { background: var(--gallery); }
.blog__cat h2 { font-size: clamp(26px, 3vw, 36px); }
.blog__about { max-width: 640px; margin-top: 10px; }
.blog__cat:last-child { padding-bottom: 104px; }

@media (max-width: 760px) {
  .post__in { padding-top: 44px; padding-bottom: 72px; }
  .post__body { margin-top: 36px; font-size: 17px; }
  .say { gap: 12px; }
  .say__pal, .say__pal img { width: 76px; height: 76px; }
  .say__bubble { font-size: 16px; }
  .post__cta { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 22px; }
  .post__cta-pal, .post__cta-pal img { width: 96px; height: 96px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .blog__top { padding-top: 48px; }
  .blog__cat { padding: 44px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card a, .blog__cats a { transition: none; }
  .card a:hover { transform: none; }
}