/* three-thresholds-trilogy-hub-sources.css
   Hub/source-page-specific styles for the Three Thresholds Trilogy series.
   Inherits VH Audio dark theme from main.css. Scoped with body.trifecta-page so it cannot leak into the rest
   of the site.

   Design notes:
   - VH Audio green (#66FF00) is reserved for major structural/navigation
     guideposts: centered hub/source section markers, continuation
     signposts, and SECTION N: prefix markers where present. It is never
     used for source-entry titles, card titles, body prose, source field
     labels, decorative rules, or as a peer link color.
   - Gold (#FFCC00 / #CC9900) is used for link/clickable affordance
     and is NOT used on non-link headings or non-link markers. Heading
     hierarchy comes from type, weight, spacing, and brightness.
   - Small structural/meta labels use white-to-gray values, not green or
     gold.
   - Article links inherit site convention from main.css; do not override.
   - Body prose, cards, source rows, bullets, and links stay left-aligned
     for readability. Hierarchy is never created by indenting body text. */

/* ---- Shell image alt-text flash suppression ----
   On slow connections the legacy left sidebar's <img> links would paint
   their alt attributes ("VH Audio Main Page", "Read reviews about VH
   Audio products", etc.) before the button graphics arrived, producing
   a visible text flash. Zeroing the type metrics on shell images keeps
   alt content out of the visual rendering while leaving it intact in
   the accessibility tree. Article body images are exempted below so any
   intentional fallback remains readable. */
body.trifecta-page .main-table-other-pages img {
  font-size: 0;
  line-height: 0;
  color: transparent;
}

body.trifecta-page .article-shell {
  max-width: 640px;
  margin: 20px auto;
  padding: 10px 24px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #CCCCCC;
  line-height: 1.65;
}

/* ---- Header (centered) ---- */

body.trifecta-page .article-shell .article-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #2A2A2A;
  text-align: center;
}

body.trifecta-page .article-shell .series-kicker {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #999999;
  font-weight: bold;
  margin: 0 0 14px;
}
body.trifecta-page .article-shell .series-kicker p { margin: 0; }

body.trifecta-page .article-shell h1 {
  font-size: 30px;
  line-height: 1.08;
  color: #FFFFFF;
  font-weight: bold;
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}

body.trifecta-page .article-shell .dek {
  font-size: 18px;
  font-style: italic;
  color: #D5D5D5;
  margin: 0 0 20px;
  line-height: 1.35;
}

body.trifecta-page .article-shell .byline,
body.trifecta-page .article-shell .publication-status {
  font-size: 12px;
  color: #999999;
}
body.trifecta-page .article-shell .byline p,
body.trifecta-page .article-shell .publication-status p { margin: 4px 0; }

/* ---- Body hierarchy ----
   H1: dominant, white, restrained.
   H2: major page milestone. Off-white by default, bold, controlled
       size — meant to feel like a chapter marker, not a page break.
       Hub and source-page structural H2s get a scoped green, centered
       guidepost override below. No decorative rule above; size + weight
       + spacing carry the hierarchy.
   H3: subordinate waypoint. Smaller than H2, semibold, slightly off-
       white (NOT gold). Tighter top spacing than H2.
   strong (in body): bold weight only — does not brighten to pure white.
       This keeps inline emphasis (e.g. "Threshold 1: The Measurable"
       labels inside the callout) from outweighing the H3 above them.
   Body prose under any heading remains flush at the article column. */

body.trifecta-page .article-shell .article-body h2 {
  font-size: 19px;
  line-height: 1.22;
  color: #F0F0F0;
  font-weight: bold;
  margin: 28px 0 12px;
  letter-spacing: -0.005em;
}

body.trifecta-page .article-shell.hub-shell .article-body h2,
body.trifecta-page .article-shell.source-shell .article-body h2 {
  color: #66FF00;
  text-align: center;
}

body.trifecta-page .article-shell.hub-shell .article-body p,
body.trifecta-page .article-shell.hub-shell .article-body ul,
body.trifecta-page .article-shell.hub-shell .article-body ol,
body.trifecta-page .article-shell.hub-shell .trilogy-card,
body.trifecta-page .article-shell.hub-shell .source-link-card,
body.trifecta-page .article-shell.source-shell .article-body p,
body.trifecta-page .article-shell.source-shell .article-body ul,
body.trifecta-page .article-shell.source-shell .article-body ol,
body.trifecta-page .article-shell.source-shell .source-list,
body.trifecta-page .article-shell.source-shell .source-entry,
body.trifecta-page .article-shell.source-shell .source-fields {
  text-align: left;
}

/* Section-number prefix marker on article-body H2s only.
   The "SECTION N:" text remains in the DOM (searchable, accessible).
   The accent color and slightly smaller size set it apart from the
   section title without dominating the heading. Scoped to
   body.trifecta-page .article-body so it cannot leak to .author-bio h2 or to source
   pages that may not use this wrapper structure. */
body.trifecta-page .article-shell .article-body h2 .section-marker {
  color: #66FF00;
  font-size: 0.82em;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

body.trifecta-page .article-shell h3 {
  font-size: 17px;
  line-height: 1.3;
  color: #E8E8E8;
  font-weight: 600;
  margin: 24px 0 8px;
}

/* ---- Body prose ----
   Paragraphs and lists remain flush at the article column under every
   heading. No nested indentation, no left border, no hanging indent. */

body.trifecta-page .article-shell .article-body p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 13px;
}

body.trifecta-page .article-shell .article-body ol,
body.trifecta-page .article-shell .article-body ul {
  padding-left: 24px;
  margin: 0 0 14px;
}

body.trifecta-page .article-shell .article-body ol li,
body.trifecta-page .article-shell .article-body ul li {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 8px;
}

body.trifecta-page .article-shell .article-body ol li p,
body.trifecta-page .article-shell .article-body ul li p { margin: 0; }

body.trifecta-page .article-shell .article-body strong { font-weight: bold; }

/* Restore default text rendering for article body images so any
   intentional caption/fallback content within the article reads
   normally, while the shell-image suppression above stays in effect. */
body.trifecta-page .article-shell .article-body img {
  font-size: 14px;
  line-height: 1.7;
  color: #CCCCCC;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 18px auto;
}

/* Article body links: intentionally NOT overridden.
   Site link colors from main.css apply (gold #FFCC00 / visited #CC9900 /
   hover #FF0000, no underline) per VH Audio convention. */

/* ---- Blockquote (distinct callout) ----
   Retains its own neutral treatment so the T1/T2/T3 definitions read as
   a callout rather than ordinary prose. */

body.trifecta-page .article-shell .article-body blockquote {
  margin: 22px 0;
  padding: 14px 20px;
  border-left: 3px solid #777777;
  background: rgba(255, 255, 255, 0.03);
}

body.trifecta-page .article-shell .article-body blockquote p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.65;
}
body.trifecta-page .article-shell .article-body blockquote p:first-child { margin-top: 0; }
body.trifecta-page .article-shell .article-body blockquote p:last-child { margin-bottom: 0; }

/* ---- Article endmatter (post-body) ----
   Final order:
   sources → serial continuation → author bio.

   Sources are article apparatus.
   Serial continuation is the next-reading path.
   Gold remains for clickable links.
   Green marks non-clickable structural/navigation cues. */

body.trifecta-page .article-shell .article-endmatter {
  margin: 0;
  padding: 34px 0 0 0;
}

/* The previous literal "---" break is no longer used. */
body.trifecta-page .article-shell .essay-break {
  display: none;
}

/* Article-specific source apparatus */
body.trifecta-page .article-shell .article-sources {
  margin: 0 0 42px 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: #999999;
}

body.trifecta-page .article-shell .source-marker {
  color: #888888;
  padding: 0 8px;
}

/* Serial continuation */
body.trifecta-page .article-shell .trilogy-nav {
  margin: 0 0 54px 0;
  padding: 0;
  text-align: center;
  color: #999999;
}

body.trifecta-page .article-shell .trilogy-nav p {
  margin: 0;
}

body.trifecta-page .article-shell .trilogy-nav-primary {
  font-size: 14px;
  line-height: 1.6;
  font-weight: normal;
  color: #999999;
}

body.trifecta-page .article-shell .continue-signpost {
  color: #66FF00;
  font-weight: normal;
  white-space: nowrap;
}

body.trifecta-page .article-shell .continue-cue {
  color: #66FF00;
  font-weight: normal;
  padding: 0 4px;
}

body.trifecta-page .article-shell .trilogy-nav-primary a {
  font-weight: bold;
  white-space: nowrap;
}

/* For Part 2 and Part 3 previous-link treatment */
body.trifecta-page .article-shell .trilogy-nav-secondary {
  margin: 12px 0 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #999999;
}

/* When a secondary nav row directly follows the primary nav row
   (Part 2 and Part 3), give it a little more breathing room than
   the default 12px so the two lines read as distinct waypoints
   rather than a tightly stacked pair. */
body.trifecta-page .article-shell .trilogy-nav-primary + .trilogy-nav-secondary {
  margin-top: 20px;
}

/* Author endmatter / colophon */
body.trifecta-page .article-shell .author-bio {
  margin: 0 0 86px 0;
  color: #BBBBBB;
}

body.trifecta-page .article-shell .author-bio h2 {
  margin: 0 0 8px 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: bold;
  color: #CCCCCC;
  letter-spacing: 0;
}

body.trifecta-page .article-shell .author-bio p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #BBBBBB;
}

/* Screen-reader-only utility */
body.trifecta-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Responsive ----
   Tighten section spacing further on small screens so chapter breaks
   never consume a viewport. Body prose stays flush at the article
   column at every breakpoint. */

@media (max-width: 800px) {
  body.trifecta-page .article-shell { padding: 10px 16px; }
  body.trifecta-page .article-shell h1 { font-size: 24px; }
  body.trifecta-page .article-shell .article-body h2 {
    font-size: 17px;
    margin-top: 22px;
    margin-bottom: 10px;
  }
  body.trifecta-page .article-shell h3 {
    font-size: 16px;
    margin-top: 18px;
    margin-bottom: 6px;
  }
  body.trifecta-page .article-shell .dek { font-size: 16px; }

  body.trifecta-page .article-shell .article-endmatter {
    padding-top: 28px;
  }

  body.trifecta-page .article-shell .article-sources {
    margin-bottom: 36px;
    font-size: 14px;
  }

  body.trifecta-page .article-shell .trilogy-nav {
    margin-bottom: 46px;
  }

  body.trifecta-page .article-shell .trilogy-nav-primary {
    font-size: 14px;
  }

  body.trifecta-page .article-shell .trilogy-nav-primary + .trilogy-nav-secondary {
    margin-top: 16px;
  }

  body.trifecta-page .article-shell .continue-signpost,
  body.trifecta-page .article-shell .trilogy-nav-primary a {
    display: inline-block;
  }

  body.trifecta-page .article-shell .author-bio {
    margin-bottom: 64px;
  }
}

/* ---- Trilogy hub and Sources & Verification pages ----
   Scoped to .article-shell descendants so these publication-page
   additions do not alter the VH Audio shell or global site styles. */

body.trifecta-page .article-shell .hub-intro {
  font-size: 15px;
  line-height: 1.7;
  color: #D0D0D0;
}

body.trifecta-page .article-shell .trilogy-card-grid,
body.trifecta-page .article-shell .source-link-grid {
  margin: 18px 0 28px 0;
}

body.trifecta-page .article-shell .trilogy-card,
body.trifecta-page .article-shell .source-link-card,
body.trifecta-page .article-shell .source-entry {
  margin: 0 0 16px 0;
  padding: 15px 18px;
  border: 1px solid #2A2A2A;
  background: rgba(255, 255, 255, 0.025);
}

body.trifecta-page .article-shell .trilogy-card h3,
body.trifecta-page .article-shell .source-link-card h3,
body.trifecta-page .article-shell .source-entry h3 {
  margin-top: 0;
}

body.trifecta-page .article-shell .card-meta {
  font-size: 12px;
  line-height: 1.55;
  color: #CCCCCC;
  margin: 0 0 8px 0;
  font-weight: bold;
  font-style: normal;
}

body.trifecta-page .article-shell .source-fields {
  margin: 4px 0 0 0;
  padding: 0;
}

body.trifecta-page .article-shell .source-fields dt {
  margin: 12px 0 2px 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #BDBDBD;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.trifecta-page .article-shell .source-fields dd {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #C8C8C8;
}

body.trifecta-page .article-shell .source-fields a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.trifecta-page .article-shell .source-list {
  margin: 18px 0 30px 0;
}

body.trifecta-page .article-shell .article-body .source-list p {
  font-size: 13px;
}

@media (max-width: 800px) {
  body.trifecta-page .article-shell .trilogy-card,
  body.trifecta-page .article-shell .source-link-card,
  body.trifecta-page .article-shell .source-entry {
    padding: 13px 14px;
  }
}