/* The reading template (SRS v3 chapter 02 FR-DES-2, FR-DES-3): the plan view of mockup/src.html:1424-1677, for
   the guides now, and the about, help and legal pages, the glossary, the zodiac pages and the posts as their groups
   come. Linked after site.css by those pages only. The page head and its breadcrumb, the tables (.table-wrap), the
   tiles (.related__grid), the knowledge list (.kh), the bead counter and the newsletter band are site.css's. */
.pagehead .byline { margin-top: 14px; color: var(--ink-3); font-size: var(--step-small); }
.pagehead .byline a { color: var(--ink-2); }
.pagehead, .doc { overflow-wrap: break-word; }
.doc__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; }
.doc { padding-block: 44px 112px; }
.doc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1100px) { .doc__grid { grid-template-columns: 220px minmax(0, 1fr); gap: 64px; } }
.toc { display: none; }
@media (min-width: 1100px) { .toc { display: block; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 28px); align-self: start; max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; } }
.toc p { color: var(--ink-3); font-size: var(--step-caption); font-weight: 600; margin-bottom: 8px; }
.toc a { display: block; padding: 5px 0; color: var(--ink-2); text-decoration: none; font-size: var(--step-small); }
.toc a:hover { color: var(--ink); text-decoration: underline; }
/* the text column: about 68 characters a line at 17 px (FR-DES-3; measured 81 at 38em in Anek Latin); tables, tiles and
   the knowledge list may use the body's full width */
.doc__body { max-width: 880px; min-width: 0; }
.doc section > :is(p, ul, ol, h2, h3, .secmark), .doc__qa { max-width: 31em; }
.doc section { padding-top: 22px; border-top: 2px solid var(--ink); }
.doc section + section { margin-top: 56px; }
.doc section > * + *, .doc__qa > * + * { margin-top: 14px; }
.doc h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.doc section > .secmark + h2 { margin-top: 4px; }
.doc section > h3, .doc__qa > h3 { font-size: 1.25rem; margin-top: 30px; }
.doc p, .doc li { color: var(--ink-2); }
.doc strong { color: var(--ink); }
.doc ul, .doc ol { padding-left: 1.3em; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.doc li::marker { color: var(--gold-ink); font-weight: 600; }
.doc code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .88em; background: var(--ground-2); padding: .1em .35em; border-radius: 3px; overflow-wrap: anywhere; }
.doc .table-wrap caption { caption-side: top; text-align: left; padding: 12px 14px 0; color: var(--ink-3); font-size: var(--step-caption); }
.callout { padding: 18px 20px; background: var(--ground-2); border-radius: 10px; margin: 18px 0; }
.callout p { color: var(--ink); }
/* a callout between two sections (the About page's invitation to share a story): the sections' own spacing */
.doc__body > .callout { margin: 56px 0 0; max-width: 31em; }
.doc__body > .callout + section { margin-top: 56px; }
.doc__body > p { max-width: 31em; margin-top: 22px; }
/* the glossary's terms: one column at every width, so no grid widens a page (issue 154) */
.doc dl.terms { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 31em; }
.doc dl.terms dt { margin-top: 22px; font-weight: 600; color: var(--ink); }
.doc dl.terms dfn { font-style: normal; }
.doc dl.terms dd { margin: 6px 0 0; color: var(--ink-2); }
/* the reference template (FR-DES-4): the index as chips, and each section's link back to it */
.doc .chips { margin-top: 14px; }
.doc .back { font-size: var(--step-small); }
/* the text template's verse block (FR-DES-4; chapter 04's FR-AARTI-10 markup): the parts of a verse together, the
   Devanagari in Anek (--font-text) at 1.7, from 1000 px the original beside its transliteration */
.verse { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 22px; max-width: 31em; }
.verse__label { color: var(--ink-3); font-size: var(--step-caption); font-weight: 600; }
.verse__text { font-family: var(--font-text); font-size: 1.125rem; line-height: 1.7; color: var(--ink); }
.verse__roman { color: var(--ink-2); font-style: italic; }
.verse__meaning { color: var(--ink-2); }
@media (min-width: 1000px) { .verse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; max-width: none; } .verse__label, .verse__meaning { grid-column: 1 / -1; } }
/* the contact form (V3.G6): one column at the text's measure, the site's fields (.fld, .inp) full width */
.cform { display: grid; gap: 16px; max-width: 31em; margin-top: 18px; }
.cform .inp { width: 100%; }
.cform textarea.inp { min-height: 9em; padding: 10px 12px; resize: vertical; }
.cform .fld > .caption { display: block; }
.fld__err { color: var(--signal); font-size: var(--step-small); }
.fld .inp[aria-invalid="true"] { border-color: var(--signal); }
/* chapter 03's reference entries (FR-CORP-26): each item's facts as a description list, one column on a phone and
   two from 700 px; the four pada cells; the ring and its caption; the switch between the nakshatra and rashi pages */
.doc .facts { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 28px; margin-top: 14px; max-width: 40em; border-top: 1px solid var(--rule); }
@media (min-width: 700px) { .doc .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc .fact, .doc .fact + .fact { display: block; padding: 10px 0; border-left: 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: var(--step-small); }
.doc .fact dt { color: var(--ink-3); }
.doc .fact dd { margin: 2px 0 0; color: var(--ink); }
.doc .entry__sub { color: var(--ink-3); }
.doc .padas__title { color: var(--ink); font-weight: 600; }
.doc .padas { list-style: none; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 31em; }
@media (min-width: 700px) { .doc .padas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.doc .padas li { padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; }
.doc .padas__n, .doc .padas a { display: block; font-size: var(--step-small); }
.doc .padas__n { color: var(--ink-3); }
.doc .padas [data-syllable] { color: var(--ink); font-size: 1.25rem; }
.doc .ring img { width: 100%; max-width: 360px; height: auto; }
.doc .ring figcaption { margin-top: 8px; max-width: 31em; color: var(--ink-3); font-size: var(--step-small); }
.doc .switch { margin: 0 0 22px; }
/* The post template (SRS v3 V3.G8, FR-DES-28): the post's unchanged body in the reading measure, its own blocks spaced
   as the doc's sections are; its pictures at their own size or the column's. */
.article-body { max-width: 42em; }
.article-body :is(p, ul, ol, h2, h3, h4, h5, figure, table, blockquote, img) + :is(p, ul, ol, h2, h3, h4, h5, figure, table, blockquote, img),
.article-body :is(section, div) + :is(section, div, p, h2, h3) { margin-top: 14px; }
.article-body :is(h2, h3, h4, h5) { margin-top: 30px; }
.article-body h3 { font-size: 1.25rem; }
.article-body :is(h4, h5) { font-size: 1.0625rem; }
.article-body img { height: auto; border-radius: 8px; }
.doc .tag-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--step-small); }
.pagehead .byline > * + * { margin-left: .3em; }