/* three-thresholds-trilogy.css
   Article-specific styles for the Three Thresholds Trilogy series.
   Inherits VH Audio dark theme from main.css. Scoped to .article-shell
   and its descendants (including .article-sources, .trilogy-nav,
   .author-bio, and .sr-only) so it cannot leak into the rest of the
   site.

   Design notes:
   - VH Audio green (#66FF00) is used sparingly in the article for
     two structural purposes: (1) the non-clickable continuation
     signpost in the endmatter, and (2) the SECTION N: prefix marker
     on article-body H2 headings. It is never used to tint body
     prose, decorative rules, or as a peer link color.
   - Gold (#FFCC00 / #CC9900) is reserved for link/clickable affordance
     and is NOT used on article headings or non-link decoration. Heading
     hierarchy comes from type, weight, spacing, and brightness.
   - Article links inherit site convention from main.css; do not override.
   - Body prose stays flush at one reading column under every heading.
     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. */
.main-table-other-pages img {
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.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) ---- */

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

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

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

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

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

/* ---- Body hierarchy ----
   H1: dominant, white, restrained.
   H2: major article milestone. White, bold, controlled size — meant to
       feel like a chapter marker, not a page break. 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. */

.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;
}

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

.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. */

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

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

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

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

.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. */
.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. */

/* ---- Inline data tables ----
   Used sparingly for at-a-glance domain-by-domain summaries. Aligns
   flush at the article column like body prose. A single thin rule
   separates header from data — structural, not decorative. Header
   row is bold at body brightness; it does not brighten to H3 levels,
   keeping it from outweighing the H3 above. */

.article-shell .article-body table {
  border-collapse: collapse;
  margin: 4px 0 22px 0;
  font-size: 14px;
  line-height: 1.6;
}

.article-shell .article-body th,
.article-shell .article-body td {
  padding: 7px 40px 7px 0;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

.article-shell .article-body th {
  font-weight: bold;
  color: #CCCCCC;
  border-bottom: 1px solid #444444;
  padding-bottom: 9px;
}

.article-shell .article-body tbody tr:not(:last-child) td {
  border-bottom: 1px solid #444444;
}

.article-shell .article-body tbody tr:first-child td {
  padding-top: 11px;
}

.article-shell .article-body th:last-child,
.article-shell .article-body td:last-child {
  padding-right: 0;
}

.article-shell .article-body th:nth-child(2),
.article-shell .article-body td:nth-child(2) {
  padding-right: 18px;
}

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

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

.article-shell .article-body blockquote p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.65;
}
.article-shell .article-body blockquote p:first-child { margin-top: 0; }
.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 is used only as a single bold navigation cue. */

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

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

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

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

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

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

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

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

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

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

/* For Part 2 and Part 3 previous-link treatment */
.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. */
.article-shell .trilogy-nav-primary + .trilogy-nav-secondary {
  margin-top: 20px;
}

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

.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;
}

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

/* Screen-reader-only utility */
.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) {
  .article-shell { padding: 10px 16px; }
  .article-shell h1 { font-size: 24px; }
  .article-shell .article-body h2 {
    font-size: 17px;
    margin-top: 22px;
    margin-bottom: 10px;
  }
  .article-shell h3 {
    font-size: 16px;
    margin-top: 18px;
    margin-bottom: 6px;
  }
  .article-shell .dek { font-size: 16px; }

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

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

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

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

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

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

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

  .article-shell .article-body th,
  .article-shell .article-body td {
    padding: 6px 14px 6px 0;
  }

  .article-shell .article-body th:nth-child(2),
  .article-shell .article-body td:nth-child(2) {
    padding-right: 10px;
  }
}