/* attention (dhyan): this page's own components, after longform.css.
   layers: tokens.css > holon.css > longform.css > this file > utilities.css. */

/* numbered steps, read down */
.steps { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 36rem; counter-reset: n; }
.steps li { counter-increment: n; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 1.2rem; padding: 0.7rem 0; border-top: 1px solid rgba(25,25,24,0.12); }
.steps li::before { content: counter(n); color: var(--quiet); font-size: 15px; padding-top: 0.25rem; }

/* plain items on hairlines */
.plain { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 36rem; }
.plain li { padding: 0.6rem 0; border-top: 1px solid rgba(25,25,24,0.12); }
.plain b { font-weight: 400; }
.plain span { color: var(--quiet); }

/* a cue: one quiet line to carry into the sit */
.cue { border-left: 1px solid rgba(25,25,24,0.35); padding-left: 1.2rem; margin: 2rem 0; font-style: italic; color: var(--quiet); max-width: 29rem; }
.cue p { margin: 0 0 0.4rem; }
.cue p:last-child { margin: 0; }

/* the questions, folded like the home page's cards (details.layer/.fold mechanism
   lives in holon.css; this page only styles what the fold contains) */
details.layer .in { margin-top: 1.2rem; }
details.layer .in p:last-child { margin-bottom: 0; }
.qa { margin-top: 1.6rem; }
.qa:first-child { margin-top: 0.4rem; }
.qa .q { margin: 0 0 0.4rem; font-size: 18px; line-height: 1.5; }
.qa .a { color: var(--quiet); font-size: 17px; line-height: 1.7; margin: 0; }

/* the verse: as within, so without */
.dhyan-verse { margin: 3.6rem 0 0; }
.dhyan-verse p, .dhyan-verse figcaption { margin: 0; }
.dhyan-verse-dev { font: 400 15px/1.6 "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Serif Devanagari", serif; color: var(--quiet); }
.dhyan-verse-iast { font: italic 400 clamp(24px, 2.6vw, 32px)/1.25 var(--serif); letter-spacing: -0.01em; }
.dhyan-verse .dhyan-verse-iast { margin-top: 0.5rem; }
.dhyan-verse figcaption { font: 400 15px/1.5 var(--sans); color: var(--quiet); margin-top: 0.7rem; }
.dhyan-verse + .dhyan-verse { margin-top: 2.8rem; }
.dhyan-verse .dhyan-verse-gloss { font: 400 clamp(19px, 1.8vw, 21px)/1.45 var(--serif); margin-top: 0.7rem; text-wrap: balance; }
.dhyan-verse .dhyan-verse-src { font: 400 13px/1.5 var(--sans); color: var(--quiet); letter-spacing: 0.02em; margin-top: 0.35rem; }
.dhyan-verse .dhyan-verse-src + figcaption { margin-top: 1.4rem; }

/* a said line: one plain serif line, its text credited below when it has one */
.say { margin: 2.8rem 0; max-width: 29rem; }
.say + .say { margin-top: -0.6rem; }
.kick + .say { margin-top: 1rem; }
.say p span { display: block; text-wrap: balance; }
.say p { font: 400 clamp(23px, 2.4vw, 26px)/1.4 var(--serif); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.say figcaption { font: 400 13px/1.5 var(--sans); color: var(--quiet); letter-spacing: 0.02em; margin-top: 0.45rem; }

/* italics are kept for transliteration only, so labels and cues sit upright */
.kick, .cue { font-style: normal; }

/* the crumb, sans as on the other pages (body here is serif) */
.top { font: 400 14px/1.65 var(--sans); color: var(--quiet); margin: 0 0 3rem; }

/* the title is an h1 now; it keeps the .big face */
h1.big { font-family: var(--serif); color: var(--ink); }

/* a status pill, as on /research */
.status { display: inline-block; font: 400 13px/1.5 var(--sans); color: var(--quiet); border: 1px solid rgba(25,25,24,0.18); border-radius: 999px; padding: 0.15rem 0.7rem; margin: 0.4rem 0 0; }