/* A6 Blogs — only what the Folio components do not cover: post covers, the post body (author HTML: images, tables,
   code, audio), comments, the tag index, the journal rail and the image lightbox. Tokens only (design/system/tokens.json). */

/* List: every child after the margin date sits in the text column (a post can have eight of them); the cover keeps the
   third column (folio.css .post__img). */
@media (min-width: 48rem) { .journal .post > :not(time, .post__img) { grid-column: 2; } }
.journal .post h2 { margin: 0; }
.journal .post h2 a:hover { color: var(--accent); }
.post .series a { display: inline-block; color: inherit; } /* a long name wraps as one box: one hit area, not two half lines */
.post .series a:hover, .featured .kicker a:hover { color: var(--accent); }
/* Long words break only when they would overflow (break-word keeps the min-content width, so tables still size to
   whole words and scroll instead of splitting them mid-word). */
.post__excerpt { overflow-wrap: break-word; }
.blog-tags { --gap: var(--s-2); margin-top: var(--s-3); }
.byline a:hover b, .byline a:hover { color: var(--accent); }
.blog-edit { display: inline-flex; align-items: center; gap: .3rem; min-height: var(--tap); }
.blog-edit .icon { width: 1rem; height: 1rem; }

/* A separator stays with the item after it: "· 4 min read" never leaves a dangling "·" at a line end. */
.byline__item, .blog-nowrap { white-space: nowrap; }
.byline__item > [aria-hidden] { margin-right: var(--s-3); }
.byline__item > .byline__sep { margin-left: var(--s-3); }
.blog-kicker-more > [aria-hidden] { margin-right: .3rem; }
/* Links stacked closer than 44 px would share their hit areas: kicker and byline lines that wrap (phones), the series
   line under a card title and the featured title under its kicker keep them apart. */
.title-block .kicker, .blog-post__head .kicker, .byline { row-gap: var(--s-5); }

/* Card and featured bylines (.blog-meta): the writer, then "6 min read · 1 comment · Edit" as nowrap items, each with
   its separator in front. On phones a break element gives the writer the first line and the rest the next one, and the
   separator that would open that line is hidden — no line ever starts with "·". Only the writer (and an admin's Edit)
   is a link, so the close lines never share a hit area. */
.byline.blog-meta { row-gap: 2px; }
.blog-meta__who { display: inline-flex; align-items: center; gap: var(--s-3); min-width: 0; }
.blog-meta__item { display: inline-flex; align-items: center; white-space: nowrap; }
.blog-meta .sep { margin-right: var(--s-3); }
.blog-meta__break { display: none; flex-basis: 100%; height: var(--s-1); }
@media (max-width: 47.99rem) {
  .blog-meta__break:not(.blog-meta__break--narrow) { display: block; }
  .blog-meta__break:not(.blog-meta__break--narrow) + .blog-meta__item > .sep { display: none; }
  /* cards: the second line lines up with the writer's name, after the avatar */
  .blog-meta:not(.blog-meta--center) > .blog-meta__break + .blog-meta__item { margin-left: calc(1.9rem + var(--s-3)); }
}
@media (max-width: 29.99rem) {
  .blog-meta__break--narrow { display: block; }
  .blog-meta__break--narrow + .blog-meta__item > .sep { display: none; }
}

/* The post's kicker "Blog · Series": on phones only the series (its long name wraps by itself; "Blog" is in the nav). */
.blog-kicker__sep { margin-right: .6rem; }
@media (max-width: 47.99rem) {
  .blog-kicker--series .blog-kicker__blog, .blog-kicker--series .blog-kicker__sep { display: none; }
}
.journal .post .series { margin-block: var(--s-3) var(--s-1); }
.featured h2 { margin-top: var(--s-4); }

/* Chips (40 px) and tags (36 px) reach 44 px only when their hit area also covers the 1 px border (the system's
   ::before insets are measured from the padding box: 42 px). */
.chip::before { inset: -3px -1px; }
a.tag::before { inset: -5px -1px; }

/* 44 px hit areas for the small standalone links (DESIGN §6), the way the system extends .tag */
.byline a, .post .series a, .kicker a, .blog-series > h2 > a, .journal .post h2 a, .featured h2 a { position: relative; }
.byline a::before, .post .series a::before, .kicker a::before, .blog-series > h2 > a::before,
.journal .post h2 a::before, .featured h2 a::before {
  content: ""; position: absolute; inset: calc((100% - var(--tap)) / 2) -4px;
}

/* Tag chips: a scrolling row on phones (chips--scroll), wrapped and centred from 48rem */
@media (min-width: 48rem) {
  .blog-filters.chips--scroll { flex-wrap: wrap; justify-content: center; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* Covers (DESIGN.md "Blog"): contained wells — the image fitted inside, never cropped, its box reserved before it
   arrives (no layout shift). The writers’ covers are mostly upright paintings (about 4:5): on phones a 4:3 well on top
   of the card, from 48rem an upright 10rem thumbnail in the right column; the featured cover a centred well (4:3, then
   upright from 48rem). With JS a click opens the original (blogs.js lightbox). */
.post__img, .featured__img { cursor: zoom-in; }
.post__img > img, .featured__img > img { object-fit: contain; }
.post__img { aspect-ratio: 4 / 3; margin-bottom: var(--s-2); }
.post__img > img { padding: 4%; }
.featured__img { width: 100%; max-width: 34rem; max-height: none; aspect-ratio: 4 / 3; }
@media (min-width: 48rem) {
  .featured__img { width: 24rem; aspect-ratio: 4 / 5; }
  .journal .post:has(.post__img) { grid-template-columns: 8rem minmax(0, 1fr) 10rem; }
  .post__img { aspect-ratio: 4 / 5; margin: .3rem 0 0; grid-row: 1 / 9; }
}
.featured .kicker a { color: inherit; }
.featured__acts { justify-content: center; margin: var(--s-3) 0 0; }
.post__acts .blog-edit { margin-left: var(--s-1); }
.featured h2 { max-width: 22ch; margin-inline: auto; overflow-wrap: break-word; }

/* Headers */
.blog-author > .avatar { margin: 0 auto var(--s-4); }
.blog-hash { color: var(--accent); margin-right: .05em; }
.title-block .kicker a.label:hover, .essay-head .kicker a:hover { color: var(--accent); }
.contents a[aria-current=page] .title { color: var(--accent); }
.blog-back { margin-top: var(--s-7); text-align: center; }
/* The series and tag indexes: one column, the journal's measure */
.blog-index { max-width: calc(52rem + 2 * var(--gutter)); }
.blog-more { margin-top: var(--s-2); text-align: right; }

/* Contents on blog pages: long names wrap (an unbreakable word must not widen the page); below 30rem the count goes
   under the name so names use the whole column. */
:is(.journal, .blog-index) .contents .title { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 29.99rem) {
  :is(.journal, .blog-index) .contents .line { flex-wrap: wrap; row-gap: var(--s-1); }
  :is(.journal, .blog-index) .contents .leader { display: none; }
  :is(.journal, .blog-index) .contents .value { flex-basis: 100%; }
}

/* The journal rail (Authors, Series): rows of writers (avatar, name, posts) and the series contents. Below 72rem it
   follows the posts in two columns from 48rem; from 72rem it is the sticky right column (folio.css .journal). */
.journal__rail .blog-series { margin-top: 0; }
.journal__rail .blog-series h2 { margin-bottom: var(--s-2); }
.journal__rail .blog-series h2 a { color: inherit; }
.journal__rail .blog-series h2 a:hover { color: var(--text); }
.blog-writer .row__t { font-size: 1.0625rem; overflow-wrap: break-word; }
.blog-writer:hover { background: var(--accent-wash); }
.blog-writer:hover .row__t { color: var(--accent); }
.blog-writer[aria-current=page] { background: var(--selected-fill, var(--accent-wash)); box-shadow: inset 2px 0 0 var(--accent); }
.blog-more-writers > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); cursor: pointer; font: 500 var(--fs-ui-sm)/1.2 var(--ff-ui); color: var(--text-subtle); }
.blog-more-writers > summary::-webkit-details-marker { display: none; }
.blog-more-writers > summary .icon { width: 1rem; height: 1rem; transition: transform var(--t); }
.blog-more-writers[open] > summary .icon { transform: rotate(180deg); }
.blog-more-writers > summary:hover { color: var(--accent); }
.journal__rail { padding-top: var(--s-6); border-top: 1px solid var(--border-faint); }
@media (min-width: 48rem) and (max-width: 71.99rem) {
  .journal__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
}
@media (min-width: 72rem) { .journal__rail { padding-top: 0; border-top: 0; } }

/* Post page */
.blog-post__head { padding-bottom: var(--s-5); }
/* The series kicker reads as one tracked line with "Blog" (the essay reader's kicker) */
.blog-post__head .kicker .meta { font: 600 var(--fs-label)/var(--lh-label) var(--ff-ui); letter-spacing: inherit; text-transform: uppercase; color: var(--text-subtle); }
.blog-post__head .kicker a.meta:hover { color: var(--accent); }
.blog-post__actions .btn .icon { width: 1.05em; height: 1.05em; }
.blog-post__head h1 { max-width: 22ch; margin-inline: auto; overflow-wrap: break-word; }
.blog-hashtags { margin-top: var(--s-2); font: 400 var(--fs-ui-sm)/1.4 var(--ff-ui); color: var(--text-subtle); overflow-wrap: break-word; }
.blog-byline { justify-content: center; margin-top: var(--s-4); }
/* Tags, then the actions (Share, Edit) on a row of their own */
.blog-post__tags { justify-content: center; margin-top: var(--s-4); --gap: var(--s-2); }
.blog-post__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }
.blog-post__actions[hidden] { display: none; }

/* Titles: lining figures, so "1: Sentence Diagram of 1.1" never reads as "ɪ: … ɪ.ɪ" (Cormorant's old-style 1). */
.blog-post__head h1, .journal .post h2, .featured h2, .pager .t, .contents .title, .contents .desc, .title-block h1 {
  font-variant-numeric: lining-nums;
}
.blog-read { max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); padding-bottom: var(--s-8); }
.blog-post__cover { margin: 0 0 var(--s-6); text-align: center; }
.blog-post__cover a { display: inline-block; max-width: 100%; cursor: zoom-in; }
/* A fixed height (the width follows the image's ratio, 4:5 until it loads): nothing below moves when it arrives. */
.blog-post__cover img { width: auto; max-width: 100%; height: min(75vh, 42rem); aspect-ratio: auto 4 / 5; object-fit: contain; }

/* Author HTML inside the reading column */
.blog-body { overflow-wrap: break-word; }
.blog-body img { display: block; max-width: 100%; height: auto; margin: var(--s-4) auto; border-radius: var(--r-xs); cursor: zoom-in; }
.blog-body a img { cursor: pointer; }
/* The painting of an image post (BlogBody.ForPage): a plate with its credit as the caption. Its box is reserved — 4:5
   until it loads — so nothing below moves when it arrives. Phones: the column width; wider screens: a fixed height. */
.blog-body .blog-plate { margin: var(--s-5) 0; text-align: center; }
.blog-body .blog-plate:first-child { margin-top: 0; }
.blog-body .blog-plate img { margin: 0 auto; }
.blog-body .blog-plate a { display: inline-block; max-width: 100%; }
.blog-body .blog-plate figcaption { margin-top: var(--s-3); text-align: center; }
.blog-body .blog-plate figcaption a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: .22em; }
.blog-body .blog-plate figcaption a:hover { color: var(--accent); }
.blog-body img[data-lead] { width: 100%; height: auto; aspect-ratio: auto 4 / 5; object-fit: contain; }
@media (min-width: 48rem) { .blog-body img[data-lead] { width: auto; height: min(75vh, 42rem); } }

/* Players: the page's palette (the native control follows the theme's color-scheme) */
.blog-body audio { display: block; width: 100%; margin: var(--s-4) 0; accent-color: var(--accent); border-radius: var(--r-pill); }
.blog-body audio::-webkit-media-controls-panel { background: var(--surface-muted); }

/* Verses (BlogBody: Devanagari-led paragraphs whose pādas are joined by <br>): no prose indent, one pāda (half-verse)
   a line, centred, set in the Devanagari face; the "॥ ९-१४ ॥" reference stays with the last pāda. */
.blog-body p.sloka { margin-block: var(--s-4); text-indent: 0; text-align: center; text-wrap: balance;
  font: var(--fs-deva-sm)/var(--lh-deva-sm) var(--ff-sanskrit); color: var(--sanskrit); }
.blog-body p.sloka [lang=sa] { line-height: inherit; }
.blog-body p.sloka a { color: var(--accent); }
.blog-body p.sloka + p { text-indent: 0; }
.blog-body figure { margin: var(--s-5) 0; }
.blog-body figcaption { font: 400 var(--fs-ui-sm)/1.4 var(--ff-ui); color: var(--text-subtle); text-align: center; }
.blog-body h2, .blog-body h3, .blog-body h4, .blog-body h5, .blog-body h6 { text-indent: 0; }
.blog-body h4, .blog-body h5, .blog-body h6 { margin: var(--s-5) 0 var(--s-2); font: var(--fw-medium) var(--fs-h4)/1.25 var(--ff-display); }
.blog-body div + div, .blog-body p:empty { text-indent: 0; }
.blog-body p { margin-block: 0; }
.blog-body p + p { margin-top: 0; }
.blog-body hr { margin: var(--s-6) auto; width: 6rem; border: 0; border-top: 1px solid var(--border-strong); }
/* Tables scroll inside their own focusable region (.table-wrap with the system's scroll shadows) rather than squeezing
   their columns: words are never split (a column is at least its longest word, and 6 characters). */
.blog-body .blog-table { margin: var(--s-5) 0; }
.blog-body table { width: 100%; border-collapse: collapse; font: 400 var(--fs-ui-sm)/1.45 var(--ff-ui); overflow-wrap: normal; word-break: keep-all; }
.blog-body th, .blog-body td { min-width: 6ch; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.blog-body tr:last-child > td { border-bottom: 0; }
.blog-body th { background: var(--surface-muted); font-weight: 600; }
.blog-body pre { overflow-x: auto; padding: var(--s-3) var(--s-4); background: var(--surface-muted); border-radius: var(--r-sm); font: 400 .9375rem/1.55 var(--ff-mono); white-space: pre-wrap; }
.blog-body code { font-family: var(--ff-mono); font-size: .9em; }
.blog-body [lang=sa] { line-height: 1.5; }
.blog-end { margin: var(--s-7) 0 var(--s-6); text-align: center; font: 1.5rem/1 var(--ff-sanskrit); color: var(--accent); }

/* IAST words found in author text are tagged lang="sa-Latn" for screen readers, but keep the author's setting: in
   prose, italicising only the words that happen to carry diacritics would patch a sentence, and in titles, series
   names and tags it would only show whether the writer typed diacritics ("Gītāmṛtam 4" italic beside "Gitamirtam 3"). */
.journal [lang=sa-Latn], .blog-post [lang=sa-Latn], .title-block [lang=sa-Latn] { font-style: inherit; }

/* Comments */
.comments { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--border-strong); }
.comments > h2 { margin-bottom: var(--s-4); font-variant-numeric: lining-nums; }
.comment-list { display: grid; }
.comment { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-4) var(--s-2); border-top: 1px solid var(--border); border-radius: var(--r-xs); scroll-margin-top: var(--s-6); transition: background var(--t); }
.comment:first-child { border-top: 0; }
.comment:target { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.comment__body { position: relative; }
.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); padding-right: 2.5rem; font: 400 var(--fs-ui-sm)/1.3 var(--ff-ui); color: var(--text-subtle); }
.comment__head b { font-weight: 600; color: var(--text); }
.comment__link { position: absolute; top: -.75rem; right: -.6rem; display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; color: var(--text-subtle); opacity: .7; }
.comment__link .icon { width: 1rem; height: 1rem; }
.comment__link:hover, .comment__link:focus-visible { color: var(--accent); background: var(--accent-wash); opacity: 1; }
.comment__text { margin-top: var(--s-1); font-size: var(--fs-small); line-height: 1.55; overflow-wrap: break-word; }
.comment__text a { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: .22em; }
.comment__text a:hover { color: var(--accent); }
.comment.is-new { animation: rise var(--dur-slow) var(--ease-enter); }
.comments__none, .comments__note { color: var(--text-muted); font-size: var(--fs-small); }
.comment-form { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.comment-form__actions { display: flex; justify-content: flex-end; }
.comments__signin { display: grid; justify-items: start; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
.comments__signin p { color: var(--text-muted); font-size: var(--fs-small); }

/* Tag index */
.blog-tag-index { --gap: var(--s-3); justify-content: center; }
.blog-tag-index .tag { gap: .45rem; }
.blog-tag-index .count { font-weight: 400; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* Lightbox (blogs.js): the original image on a scrim, closed with Esc, the close button or a click */
.lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgb(13 10 7 / .94); color: #f3eada; }
.lightbox::backdrop { background: rgb(13 10 7 / .5); }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; place-items: center; animation: rise var(--dur-sheet) var(--ease-enter); }
.lightbox__close { justify-self: end; margin: var(--s-2); color: #f3eada; }
.lightbox__close:hover { background: rgb(255 255 255 / .12); color: #fff; }
.lightbox img { max-width: calc(100vw - 2 * var(--gutter)); max-height: 100%; object-fit: contain; border-radius: var(--r-xs); background: #211a13; }
.lightbox__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--s-4); padding: var(--s-2) var(--gutter) var(--s-3); font: 500 var(--fs-ui-sm)/1.4 var(--ff-ui); color: #f3eada; }
.lightbox__foot span { display: inline-flex; align-items: center; min-height: var(--tap); }
.lightbox__foot a { color: inherit; text-decoration: underline; text-underline-offset: .22em; min-height: var(--tap); display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .lightbox[open], .comment.is-new { animation: none; } }