/* ==========================================================================
   Site-wide CONTENT TYPOGRAPHY — approved rollout (client sign-off 2026-08-02).

   Sizes, line-heights, colour and layout for content pages. Loaded by
   includes/header.php AFTER combined.min.css, because the legacy bundle
   hard-codes `line-height:23px !important` and `color:#000 !important` on
   body text — beating those is the point of this sheet.

   NOT loaded on the Talks pages (rni-talks, rni-talk, rni-talk-read,
   theosophy-talks, student-talks, studio-vach): they already implement this
   design natively and the overlay would fight their own scale. The font
   families still reach them via css/fonts-system.css.

   Depends on js/tt-card-titles.js for the homepage category cards: the
   `.tt-title-fit` rule near the end is applied by that script. CSS alone
   cannot tell whether a neighbouring card's title wrapped.

   SOURCE OF TRUTH: preview-typography/_talks-spec.css. Change it there,
   re-verify in the sandbox, then regenerate — never hand-edit only this copy.
   ========================================================================== */

/* ==========================================================================
   Talks-page typography, site-wide (preview) — Palatino Linotype + Open Sans
   (the two faces of the Raghavan talk pages; JP email 2026-07-26).

   Reference: the LIVE rni-talks.php page (includes/talks-listing.php), which
   the client approved. This stylesheet translates that page's design language
   to the generic content pages:

     headings   Palatino Linotype 700, navy #003366 (rr-talk-heading face)
     body       Palatino Linotype 16px / 1.45 / #000, justified
                (JP 2026-07-26: talk-page faces + slightly reduced leading)
     buttons    Helvetica 600 13px — navy primary    (rt-btn-read)
     background cream #faf7f0                        (rt-page-bg)

   ARCHITECTURE (learned the hard way):
   - FONT-FAMILY rules are strong (ID-scoped) — the typeface swap should hit
     every piece of text, including banner titles.
   - SIZE / COLOR / MARGIN / BORDER rules are wrapped in :where(), which has
     ZERO specificity — so any component's own class styling wins over them
     (.home-welcome__title stays gold on navy, .faq-section-title stays white
     16px, Bootstrap's .panel-title keeps margin:0, .widget-title stays white).
     Without this, navy headings landed on navy bands and became invisible,
     and accordion headers inherited huge heading margins.
   - The Talks pages themselves (rni-talks / theosophy-talks / studio-vach /
     single talks) natively implement this design; their wrappers set
     TT_TYPO_SKIP_SPEC so this sheet is not loaded there at all.
   - `!important` is used ONLY on body-copy size/line-height/color, because
     the legacy combined.min.css hard-codes `line-height:23px !important` and
     `color:#000 !important` — beating those is the point of the rollout.

   ========================================================================== */

/* ── Tokens (mirrors includes/talks-listing.php) ── */
:root {
  --pf:   "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --lora: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --ui:   "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --navy:  #003366;
  --navy2: #00285a;
  --gold:  #FAD807;
  --ink:   #000;          /* body text — pure black (JP 2026-07-26: restore contrast on cream) */
  --page-bg: #faf7f0;     /* cream — matches --rt-page-bg on the Talks pages */

  --measure: 720px;       /* comfortable reading column for long-form */
}

/* ── Cream page background, scoped to the content area ── */
#main-content,
.page-wrapper,
.readContent { background: var(--page-bg); }

/* The single site-wide font system now lives in _fonts-only.css (loaded on
   every page, including the Talks pages). This file keeps the content
   design — colors, sizes, spacing, layout — for the non-Talks pages. */

/* ── Footer: keep its native colours/sizes; only the font changes now. ──
   The footer sits inside .page-wrapper on some pages; preserve its white
   headings / light body / navy band (the site-wide font rule above already
   gave it Playfair headings + Lora body). */
.footer, .footer h1, .footer h2, .footer h3, .footer h4,
.page-wrapper .footer h1, .page-wrapper .footer h2,
.page-wrapper .footer h3, .page-wrapper .footer h4,
#main-content .footer h1, #main-content .footer h2,
#main-content .footer h3, #main-content .footer h4 {
  color: #fff !important;
}
.footer p, .footer li, .footer span, .footer em, .footer strong,
.page-wrapper .footer p, .page-wrapper .footer li,
#main-content .footer p, #main-content .footer li {
  color: #efebeb !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}
/* Footer keeps its own navy band, not the content cream. */
.page-wrapper .footer, #main-content .footer, .readContent .footer {
  background: #003366;
}

/* ══ TYPEFACE SWAP (strong — applies everywhere in content) ══ */

#main-content h1, .page-wrapper h1, .readContent h1,
#main-content h2, .page-wrapper h2, .readContent h2,
#main-content h3, .page-wrapper h3, .readContent h3,
#main-content h4, .page-wrapper h4, .readContent h4,
.post-title, h1.post-title, h3.post-title {
  font-family: var(--pf);
}

#main-content p, .page-wrapper p, .readContent p,
.detailsPage p, .post .post-content p, .post-content p,
.articleDetails p,
#main-content blockquote, .page-wrapper blockquote, .readContent blockquote,
#main-content small, .page-wrapper small, .readContent small,
.post-meta {
  font-family: var(--lora);
}

/* ══ DESIGN VALUES (zero specificity — component classes always win) ══ */

/* Headings */
:where(#main-content, .page-wrapper, .readContent) h1 {
  font-weight: 700;
  font-size: 32px;                 /* content-page scale (heroes style their own) */
  line-height: 1.25;
  letter-spacing: .005em;
  color: var(--navy);
  margin: 20px 0 14px;
}

/* h2 carries the Talks section signature: navy + 2px navy underline. */
:where(#main-content, .page-wrapper, .readContent) h2 {
  font-weight: 700;
  font-size: 26px;                 /* matches .rt-section-hd */
  line-height: 1.2;
  letter-spacing: .005em;
  color: var(--navy);
  border-bottom: 2px solid var(--navy);
  padding-bottom: 10px;
  margin: 2.2rem 0 1.1rem;
}

:where(#main-content, .page-wrapper, .readContent) h3 {
  font-weight: 700;
  font-size: 20px;                 /* matches .rt-title */
  line-height: 1.25;
  color: var(--navy);
  margin: 2rem 0 .8rem;
}

:where(#main-content, .page-wrapper, .readContent) h4 {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--navy);
  margin: 1.6rem 0 .6rem;
}

/* Content titles (generic classes we DO want in the Talks look) */
.post-title { color: var(--navy); }

/* ── Body copy → Lora 16/1.5 #000 justified (JP review 2026-07-26:
   +1pt size, tighter leading, pure black — was 15/1.75 #333) ──
   size/line-height/color use !important ONLY to beat the legacy
   combined.min.css `line-height:23px !important` / `color:#000 !important`.
   Scoped to :where(#main-content) + the content classes — deliberately NOT
   a bare #main-content complex, so on-band components with their own
   !important colors (styled in later <style> blocks) can still win ties. */
:where(#main-content) p,
.page-wrapper p, .readContent p,
.detailsPage p, .post .post-content p, .post-content p,
.articleDetails p {
  font-weight: 400;
  font-size: 17px !important;   /* JP Zoom 2026-07-26: was 16px */
  line-height: 23px !important; /* JP Zoom 2026-07-26: was 1.45 */
  color: var(--ink) !important;
  text-align: justify;
  margin: 0 0 1.1rem;
}

/* Banner bits that sit on navy and would drown in the forced #333: */
.home-welcome__eyebrow { color: #aabfe0 !important; }

/* Reading text in lists & tables (nav/breadcrumb/widget lists live outside
   these containers, so they are untouched). */
.readContent li, .readContent td,
.post-content li, .post-content td,
.articleDetails li, .articleDetails td,
.page-wrapper .post-content li, .page-wrapper .post-content td {
  font-family: var(--lora);
  font-size: 17px !important;   /* JP Zoom 2026-07-26 */
  line-height: 23px !important;
  color: var(--ink) !important;
}

/* ── Listing pages (sub-page & friends) ──
   The article lists are bare <a> elements in .borderList divs — not p/li —
   so the body rule above never reaches them and combined.css's Roboto held.
   Class-level selectors only: the Talks pages style their own anchors
   (.rt-btn-read etc.) with class selectors, and an ID-strength rule here
   would steamroll them. */
.post-content a, .readContent a, .articleDetails a {
  font-family: var(--lora);
}
/* Links inside headings keep the heading's Playfair. */
.post-content h1 a, .post-content h2 a, .post-content h3 a, .post-content h4 a,
.readContent h1 a, .readContent h2 a, .readContent h3 a, .readContent h4 a {
  font-family: inherit;
}
/* Listing section headers → Playfair navy (keep their existing sizes). */
.articleYear, .articleChar {
  font-family: var(--pf);
  font-weight: 700;
  color: var(--navy);
}

/* ── A–Z card listings (sub-page): equal-height rows ──
   Legacy combined.css sets `.borderList{ height:50px; line-height:44px }` — a
   single-line card that centers text via line-height, so multi-line titles
   overflowed and overlapped the row below.

   Letting each card size to its own content fixed the overflow but left the
   rows RAGGED: Bootstrap 3 columns are floats with no height relationship, so
   a two-line title next to one-line titles made the row uneven and punched
   gaps into the grid. Make the cards' parent a flex row so every card in a
   visual row matches the tallest one.

   The flex container must be the cards' DIRECT parent: RNI-yearwise nests the
   `.articleLinks` columns inside a `.col-lg-12`, while sub-page emits them
   straight into a `.row` — so match the known wrapper classes rather than
   assuming one structure (a `.row`-only rule silently misses the former). */
div.row:has(> .articleLinks),
div[class*="col-"]:has(> .articleLinks),
.artcileBox:has(> .articleLinks) {
  display: flex;
  flex-wrap: wrap;
}
/* sub-page.php emits the A–Z section letter as a SIBLING of the cards inside
   the same .row (`<div class='row'><div class='articleChar'>A</div>…`). Under
   the old float layout it behaved as a full-width heading; once the row became
   a flex container it turned into a flex ITEM and sat beside the cards, eating
   horizontal space so the first line held only two cards instead of three.
   Force it onto its own full-width line so it reads as a heading again. */
.articleChar,
.articleYear {
  flex: 0 0 100%;
  width: 100%;
}
/* The column stretches to the row height; its card fills the column. */
.articleLinks {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.borderList {
  height: auto !important;
  min-height: 50px;
  flex: 1 1 auto;
  width: 100%;
  line-height: 1.35 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 10px !important;
}
.borderList a {
  display: inline-block;
  line-height: 1.35 !important;
  font-size: 15px !important;   /* match the Talks listing body scale */
}
/* News listing cards (theosophy-news): date line + excerpt → Lora. */
.news-meta, .news-excerpt {
  font-family: var(--lora);
}

/* ── Article Index (section.tta) ──
   The archive page is its own design system (no #main-content/.post-content
   wrapper), so the rules above never reach it. Typeface swap only — its
   recently-built layout, rules and colors stay as designed. */
.tta h1, .tta h2, .tta h3, .tta__title {
  font-family: var(--pf);
}
.tta p, .tta li, .tta a, .tta__lede, .tta__count {
  font-family: var(--lora);
}

/* ── Search pages (.tts) — typeface swap; the navy/gold design, uppercase
   Helvetica eyebrow (.tts__org) and Search button stay as designed. */
.tts h1, .tts h2, .tts h3, .tts__title {
  font-family: var(--pf);
}
.tts p:not(.tts__org), .tts li, .tts a,
.tts .tts__lede, .tts .tts__tip, .tts input, .tts textarea {
  font-family: var(--lora);
}

/* ── Reading measure for long-form PROSE columns ── */
.readContent .post-content,
.readContent .post,
.page-wrapper .post-content {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
/* Card-grid listing pages (A–Z / by-year, .articleLinks) keep a contained,
   centred column — like the original preview look — rather than the 720px
   prose measure (too narrow, squeezed the 3-col grid) or full container width
   (edge-to-edge). ~1040px centred keeps the three columns comfortable with
   balanced side margins on wide screens. */
.readContent .post-content:has(.articleLinks),
.readContent .post:has(.articleLinks),
.page-wrapper .post-content:has(.articleLinks) {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Blockquotes → Lora italic (matches .rt-band em) ── */
:where(#main-content, .page-wrapper, .readContent) blockquote,
.post-content blockquote, .articleDetails blockquote {
  font-family: var(--lora);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45 !important;
  color: var(--ink) !important;
}
:where(#main-content, .readContent, .post-content) blockquote p {
  font-style: italic;
  font-size: 18px !important;
  line-height: 1.45 !important;
  text-align: left;
}

/* ── Captions / meta ── */
:where(#main-content, .page-wrapper, .readContent) small,
.post-meta {
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* ── Buttons → Talks button language (rt-btn-read) ──
   Primary action: navy, white text. Scoped to the content containers so
   nav / search-widget chrome is untouched. */
#main-content .btn, .page-wrapper .btn, .readContent .btn,
#main-content button[type="submit"], .page-wrapper button[type="submit"],
.readContent button[type="submit"],
#main-content input[type="submit"], .page-wrapper input[type="submit"],
.readContent input[type="submit"] {
  font: 600 13px/1 var(--ui) !important;
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 10px 16px !important;
  height: auto !important;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
#main-content .btn:hover, .page-wrapper .btn:hover, .readContent .btn:hover,
#main-content button[type="submit"]:hover, .page-wrapper button[type="submit"]:hover,
.readContent button[type="submit"]:hover,
#main-content input[type="submit"]:hover, .page-wrapper input[type="submit"]:hover,
.readContent input[type="submit"]:hover {
  background: var(--navy2) !important;
  color: #fff !important;
}

/* ── Word-footnote guard ──
   Article bodies pasted from MS Word carry p.MsoFootnoteText inside
   div#ftnN. Pin their size/line-height so no heading/serif/first-letter
   rule can ever blow the [N] markers up into the "staircase" again.
   The #main-content variants outrank every body-copy complex above. */
div[id^="ftn"] p, p.MsoFootnoteText,
#main-content div[id^="ftn"] p, #main-content p.MsoFootnoteText,
.page-wrapper div[id^="ftn"] p, .page-wrapper p.MsoFootnoteText,
.readContent div[id^="ftn"] p, .readContent p.MsoFootnoteText {
  font-family: var(--lora);
  font-size: 13px !important;
  line-height: 1.6 !important;
  text-align: left;
  float: none;
}
div[id^="ftn"] p::first-letter,
p.MsoFootnoteText::first-letter {
  font-size: inherit !important;
  float: none !important;
}
sup, a[href^="#_ftn"] { font-size: 11px; line-height: 0; }

/* ── Mobile (mirrors the Talks media query) ── */
@media (max-width: 767px) {
  :where(#main-content, .page-wrapper, .readContent) h1 { font-size: 28px; line-height: 1.2; }
  :where(#main-content, .page-wrapper, .readContent) h2 { font-size: 22px; }
  :where(#main-content, .page-wrapper, .readContent) h3 { font-size: 18px; }

  /* JP 2026-07-26: body text read ~2pt too small on phones — bump to 18px
     (was clamped to the Talks 15px). Desktop stays 16px. */
  :where(#main-content) p, .page-wrapper p, .readContent p,
  .detailsPage p, .post .post-content p, .post-content p,
  .articleDetails p { font-size: 18px !important; line-height: 1.6 !important; }
  .readContent li, .readContent td, .post-content li, .post-content td,
  .articleDetails li, .articleDetails td,
  .page-wrapper .post-content li, .page-wrapper .post-content td {
    font-size: 18px !important; line-height: 1.6 !important; }

  /* Cards stack one per row on phones, so there is no row to equalise —
     drop back to normal flow. */
  div.row:has(> .articleLinks),
  div[class*="col-"]:has(> .articleLinks),
  .artcileBox:has(> .articleLinks) { display: block; }
  .articleLinks { display: block; }
}

/* JP 2026-07-26: iPad range gets the same +2px bump (desktop ≥1025px keeps
   the reviewed 16px spec untouched). */
@media (min-width: 768px) and (max-width: 1024px) {
  :where(#main-content) p, .page-wrapper p, .readContent p,
  .detailsPage p, .post .post-content p, .post-content p,
  .articleDetails p { font-size: 18px !important; line-height: 1.55 !important; }
  .readContent li, .readContent td, .post-content li, .post-content td,
  .articleDetails li, .articleDetails td,
  .page-wrapper .post-content li, .page-wrapper .post-content td {
    font-size: 18px !important; line-height: 1.55 !important; }
}


/* ── JP Zoom feedback round 3 (2026-07-26) ─────────────────────────────────
   Exact values as dictated on the call. */
.gv-circle p{ padding-right: 15px; }                    /* "Ola" block para */
.home-welcome__body p { text-align: justify !important; }
.post .post-title { margin: 12px 0 0 !important; }
/* Homepage category cards: titles run one to three lines ("Mahatma Articles"
   vs "Sri Raghavan Iyer ~ / Theosophical Writings"), and each card sizes
   independently, so the navy rule under the title landed at a different height
   on every card and the gap above the body copy looked uneven. Reserve a
   consistent two-line title box so the rules line up across the grid. (The
   stray <br /> after subtitle-less titles is fixed at source in index.php.)

   JP feedback round 4 (2026-07-31): round 3's `min-height:74px` +
   `align-items:flex-end` could never satisfy both of JP's gaps at once,
   because the navy rule IS this element's own `border-bottom`. Inflating the
   box to 74px necessarily moves that border away from a short title:
     flex-end   → rule tight under text (22px), but a 42.8px hole above
                  one-line titles — the "too much space between the thumbnail
                  and the Title" JP flagged on Mahatma Articles / Other
                  Authors / Theosophy Trust Books.
     flex-start → thumbnail gap right (12px), but the rule drops 52.8px below
                  one-line titles — JP's other complaint.
   Both reported problems are the same rule pulling in opposite directions.

   Fix: drop min-height entirely so the box hugs its text — the border then
   sits directly under the words on EVERY card, giving one thumbnail→title
   gap (12px) and one title→rule→body gap, matching the spacing JP approved
   on "Universal Symbols of Humanity". Cards are levelled with equal-height
   flex columns below instead, so the grid still lines up.

   JP feedback round 5 (2026-07-31): that fix cured the thumbnail gap but
   re-broke the alignment JP had already approved. With the box hugging its
   text, a title's depth is however many lines it happens to run, so the navy
   rule sits at a different height on one-line and two-line cards standing
   side by side. Measured at 1440px: two-line cards ("Sri Raghavan Iyer ~
   Theosophical Writings") put the rule 127.6px below the card top, one-line
   cards ("Great Teachers of Theosophy") 96.4px — 31.2px apart, i.e. exactly
   one line-height. That is the pair in JP's screenshot.

   The two constraints are only in conflict if the text is bottom-aligned in
   the box, which is what round 3 did (flex-end pushed short titles down and
   opened the hole under the thumbnail). Reserving the same two-line box but
   leaving the text at the TOP satisfies both at once:
     * min-height 2 lines → the border lands at a uniform two-line depth, so
       the rules line up across the row regardless of title length;
     * text stays at the top of that box → the thumbnail→title gap stays the
       12px JP signed off on, on one-line and two-line cards alike.
   The reserved space is absorbed below the text, above the rule, where it
   reads as part of the title→rule gap rather than as a hole.

   The height is expressed in the title's own `em` rather than as a fixed px,
   so the box tracks the font-size and keeps holding at the mobile scale,
   where round 3's flat 74px would have over-reserved. It must cover the
   PADDING AND BORDER as well as the two lines, because `box-sizing` here is
   border-box: a two-line title measures 2 × 1.2em line-boxes + 10px
   padding-bottom + 2px border.

   `height` (not `min-height`) is deliberate. These titles use a SYSTEM font
   stack — "Palatino Linotype", Palatino, "Book Antiqua", Georgia — with no
   webfont, so the same title occupies a different number of lines on
   different machines: Windows has real Palatino Linotype, macOS falls back to
   Palatino, whose wider metric pushes "Sri Raghavan Iyer ~ / Theosophical
   Writings" onto a third line. With `min-height` the box grows to whatever
   the local font needs and the rules drift apart again on exactly the
   machines that don't have JP's font. A fixed `height` pins the rule to the
   same depth on every card and every platform, which is what JP is asking
   for; `overflow: visible` lets a title that runs long on some fallback
   render its extra line rather than being clipped. */
.post .post-title {
  display: block;
  /* two line-boxes + the padding and border the border-box model includes */
  height: calc(2 * 1.2em + 10px + 2px);
  overflow: visible;
}
/* JP 2026-08-01: the reserved second line is only worth having when some
   title in the row actually needs it. On a row where BOTH titles are single
   line ("Mahatma Articles" / "Stories and Allegories") the reservation is
   empty on both cards, so the rules already agree and the only thing the
   extra height does is open a gap between the title and its rule. Such rows
   hug their text instead.

   The row test cannot be written in CSS — index.php emits the cards as a flat
   run of .col-lg-6 divs with .clear-row spacers and no per-row wrapper to
   select, and CSS cannot ask whether a sibling wrapped — so _inject.php
   measures each title and adds this class to the rows that qualify. Mixed
   rows (one-line beside two-line) keep the fixed height and stay aligned. */
.post .post-title.tt-title-fit {
  height: auto;
}
/* Keep the two-line box honest on fallback fonts. index.php writes these
   titles as "Sri Raghavan Iyer ~ <br> Theosophical Writings" — the <br> is
   the intended break, so each half should occupy exactly one line. It does on
   JP's Palatino Linotype, but macOS's wider Palatino fallback runs
   "Theosophical Writings" to 271.6px against a 263.3px card and wraps it onto
   a third line, which under the fixed height above would overlap the body
   copy by 7.5px.

   Shrinking the type would leave these four cards visibly smaller than their
   neighbours, so the overflow comes out of the letter-spacing instead: the
   font-size stays 26px and still matches the cards beside it. The spec adds
   0.13px of tracking to these titles; "Theosophical Writings" is 21
   characters, so pulling the tracking back to -0.28px reclaims ~8.6px — just
   past the 8.3px overflow — and is invisible at this size. (font-stretch was
   tried first and is useless here: Palatino is not a variable font, so the
   declaration computes but changes no glyph widths.)

   On JP's narrower Palatino Linotype the phrase already fits with room to
   spare, so the tighter tracking costs nothing there. */
.post .post-title {
  letter-spacing: -0.28px;
}
/* Hermes Recordings — match the Raghavan index line length (JP 2026-07-31).
   Both pages print the same Iyer bio through the same `.author-bio-text`
   class, but sub-page.php wraps it in `.author-bio > .container > .row >
   .col-md-10.col-md-offset-1` (10/12 of the grid, centred → 1056.7px at
   1440px viewport) while HERMES-recordings.php:149 drops the div straight
   into `.articleHeader` with no column wrapper, so it runs the full 1240px
   container. Same text, 183px wider measure — which is what JP is seeing.

   Reproduce that column's text box here rather than editing the page, so the
   whole review stays inside the preview layer. Note the percentage is NOT
   83.333%: sub-page.php nests a second .container/.row inside .articleHeader,
   which re-widens the grid to 1280px before col-md-10 divides it, so the
   reference text box is 83.333% of 1280 minus its 5px gutters = 1056.7px.
   HERMES has no such nested container — .author-bio-text sits directly on the
   1240px .articleHeader — so matching that measure here needs
   1056.7 / 1240 = 85.22%. (83.333% of 1240 lands at 1033.3px, ~23px narrow.)
   At rollout the tidier change is to wrap the div in HERMES-recordings.php in
   the same markup sub-page.php uses, which reproduces this geometry without a
   magic number. Scoped through .articleHeader so the properly-wrapped copy on
   sub-page.php (ancestor .col-md-10) is left alone. */
.articleHeader > .author-bio-text {
  width: 85.22%;             /* = the 1056.7px reference measure at 1240px */
  margin-left: auto;         /* auto margins = col-md-offset-1 centring */
  margin-right: auto;
}
.articleTitle { margin-bottom: 15px !important; }
.borderList a { font-size: 17px !important; line-height: 23px !important; }
.articleDetails p, .articleLinks a, .media.quotation p,
.post .post-content p, .widget.widget-category ul li a { font-size: 17px !important; }
/* FAQ blocks match body copy */
#homeFaqAccordion a[role="button"], #homeFaqAccordion .panel-body,
.faq-section .panel-title a, .faq-section .panel-body,
.art-faq-q, .art-faq-a { font-size: 17px !important; line-height: 23px !important; }
/* RNI dedication: centre the whole block. The <p> holds the portrait, the name
   and the dates, so the IMAGE needs centring too — the justified body rule
   above would otherwise leave the inline <img> flush left and stretch the
   name/date lines across the widget. */
.dedication { text-align: center !important; }
.dedication img { display: block; margin: 0 auto 6px; } /* RNI portrait centred */
.coming-soon .block .copyright-text, .dedication span { font-size: 14px !important; }
.rt-summary, .ta-main p, .ta-intro-full p, .ta-split p, .ta-sections p, .ta-rowlist .ta-row
{font-size:17px !important; line-height:23px !important;}
/* theosophical_astrology.php sets `.ta-main p{font-size:16px !important}` in its
   own <head> <style>. That is also !important and equally specific, and the page
   block wins on order — so scope through the page's .ta-wrap ancestor to
   outrank it and land JP's 17/23 here too. */
.ta-wrap .ta-main p, .ta-wrap .ta-intro-full p, .ta-wrap .ta-split p,
.ta-wrap .ta-sections p, .ta-wrap .ta-rowlist .ta-row
{font-size:17px !important; line-height:23px !important;}
/* .rr-transcript lives in _fonts-only.css: transcripts are Talks pages, which
   set TT_TYPO_SKIP_SPEC, so a rule here would never load. */