/* ============================================================
 * imjustdex.com — article.css
 * Long-form reading system: article frame, header, body,
 * drop cap, section heads, pull quote, callout, scripture,
 * stat block, closing, share bar, research cta, reading
 * progress, section indicator.
 *
 * Loaded on /words/* pages only.
 * ============================================================ */

/* ── Article frame ─────────────────────────────────────────── */

.article-frame {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 var(--space-3xl);
}

/* ── Article header ────────────────────────────────────────── */

.article-header {
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  /* 28→32 top, 22→24 bottom. Article header is the most prominent
     content frame on the page; the 4/2 px drift is a deliberate
     loosening that reads as more editorial. */
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  margin-bottom: 0;
}

.article-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md); /* 18→16, 2px tighter */
}

.article-tag {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  /* Phase 6 exception — 3px bottom = 1px optical pull up from the
     4px top, centering the mono label inside the tag. Sides stay 8. */
  padding: var(--space-hairline) var(--space-xs) 3px;
  border: var(--border-weight-chrome) solid var(--border);
  background: var(--ink);
  color: var(--bg);
}

.article-date,
.article-read {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-chrome);
  text-transform: uppercase;
  color: var(--body-muted);
}

.article-title {
  font-family: var(--display);
  font-size: var(--text-h1);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
}

.article-deck {
  font-family: var(--mono);
  font-size: var(--text-citation);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-nav);
  color: var(--body-muted);
  text-transform: uppercase;
  max-width: 480px;
  border-left: var(--border-weight-content) solid var(--border);
  padding-left: var(--space-chrome);
}

/* ── Article body ──────────────────────────────────────────── */

.article-body {
  border-left: var(--border-weight-content) solid var(--border);
  border-right: var(--border-weight-content) solid var(--border);
  border-bottom: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  /* 40→48 top snap = 8px looser top breathing; flagged as the
     largest visible drift in the diff preview. Bottom stays --space-2xl. */
  padding: var(--space-2xl) var(--space-lg) var(--space-2xl);
  font-family: var(--body);
  font-size: var(--text-lede);
  line-height: var(--lh-loose);
  color: var(--body-color);
}

.article-body p {
  margin: 0 0 1.5em; /* em-relative paragraph rhythm, scope-excluded from --space-* */
}

.article-body a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px; /* underline geometry, scope-excluded */
  text-decoration-thickness: 2px;
}

.article-body a:hover {
  /* --accent-text (not --accent) — small body text needs the dark-mode
     flip to #ff4d4d for WCAG AA (4.5:1). #c00 on #060606 is only 3.45:1
     which passes non-text but fails small body text. The one other
     small-text consumer of red in the article body. (Phase 4.2) */
  color: var(--accent-text);
}

/* ── Drop cap ──────────────────────────────────────────────
 * Explicit span pattern (not ::first-letter pseudo) so the
 * drop cap is addressable by assistive tech, survives text
 * normalization, and renders consistently across browsers.
 * Markup: <p class="intro"><span class="dropcap">I</span>...</p>
 * ---------------------------------------------------------- */

.article-body .intro .dropcap {
  font-family: var(--display);
  /* Phase 5 exception — 4.8em is a relative multiplier of the
     paragraph's font-size, not a ramp value. Line-height .72 is a
     drop cap tuning, not part of the --lh-* ladder. */
  font-size: 4.8em;
  font-weight: var(--weight-regular);
  float: left;
  line-height: .72;
  margin-right: var(--space-xs);
  margin-top: var(--space-hairline);
  color: var(--ink);
}

/* ── Section head ──────────────────────────────────────────── */

.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-chrome);
  /* 20→24 bottom snap = 4px looser space between section head
     and first paragraph. Visible but deliberate — gives the head
     more rhetorical weight. */
  margin: var(--space-2xl) 0 var(--space-lg);
}

.section-head h2 {
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}

.section-head-line {
  flex: 1;
  height: 3px; /* rule thickness, scope-excluded */
  background: var(--accent);
}

/* ── Pull quote ────────────────────────────────────────────── */

.pull-quote {
  /* 40→48 top/bottom margin = 8px looser vertical breathing
     around the pull quote. Flagged as visible drift. */
  margin: var(--space-2xl) calc(-1 * var(--space-lg));
  padding: var(--space-xl) var(--space-lg);
  border-top: var(--border-weight-content) solid var(--border);
  border-bottom: var(--border-weight-content) solid var(--border);
  background: var(--body-tint);
}

.pull-quote p {
  font-family: var(--display);
  font-size: var(--text-h2);
  font-weight: var(--weight-regular);
  line-height: 1.1; /* Phase 5 exception — preserves editorial leading on in-essay pull quotes; --lh-tight (1.05) read too dense */
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* ── Callout ───────────────────────────────────────────────── */

.callout {
  /* 36→32 top/bottom snap = 4px tighter; 18→16 left pad snap. */
  margin: var(--space-xl) 0;
  padding: 0 0 0 var(--space-md);
  border-left: var(--border-weight-content) solid var(--accent);
  font-family: var(--body);
  font-size: var(--text-quote);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.callout p {
  margin: 0;
}

.callout-emph {
  color: var(--accent-text);
  font-weight: var(--weight-bold);
}

/* ── Scripture block ───────────────────────────────────────── */

.scripture {
  border: var(--border-weight-chrome) solid var(--body-faint);
  background: var(--body-tint);
  padding: var(--space-lg);
  margin: var(--space-xl) 0; /* 36→32 tighter */
}

.scripture p {
  font-family: var(--body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--body-color);
  font-style: italic;
  margin: 0 0 var(--space-sm); /* 10→12 */
}

.scripture cite {
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ── Stat block ────────────────────────────────────────────── */

.stat-block {
  margin: var(--space-2xl) calc(-1 * var(--space-lg));
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 3px 1fr; /* bar width, scope-excluded */
  gap: 0 var(--space-lg); /* 20→24 */
}

.stat-block-bar {
  background: var(--accent);
}

.stat-block-text {
  font-family: var(--display);
  font-size: var(--text-stat);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--ink);
}

.stat-block-text span {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-micro);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  color: var(--body-muted);
  margin-top: var(--space-xs);
}

/* ── Closing ───────────────────────────────────────────────── */

.closing {
  margin-top: var(--space-2xl);
  /* 28→32 top/bottom. Closing block is the last content frame;
     a touch more padding honors its rhetorical position. */
  padding: var(--space-xl) var(--space-lg);
  border: var(--border-weight-content) solid var(--border);
  background: var(--panel);
  font-family: var(--body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--body-color);
  font-style: italic;
}

/* ── Share bar ─────────────────────────────────────────────── */

.share-bar {
  display: flex;
  align-items: center;
  gap: var(--space-chrome);
  margin-top: 0;
  padding: var(--space-chrome) var(--space-lg);
  border: var(--border-weight-content) solid var(--border);
  border-top: 0;
  background: var(--panel);
}

.share-label {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--body-muted);
}

.share-link {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-chrome);
  text-transform: uppercase;
  color: var(--body-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: var(--weight-bold);
  padding: var(--space-sm) var(--space-sm); /* 10→12, symmetric */
  min-height: 44px;
}

.share-link:hover {
  color: var(--ink);
}

.subscribe-link {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-chrome);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  /* 10→12 snap, dropping the original 1px optical pull.
     At sub-button scale (secondary share-bar action) the 1px
     delta was below the perception threshold. Now symmetric. */
  padding: var(--space-sm) var(--space-chrome);
  min-height: 44px;
  border: var(--border-weight-chrome) solid var(--border);
  background: var(--ink);
  color: var(--bg);
}

/* ── Research CTA ──────────────────────────────────────────── */

.research-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 18→16 top/bottom snap. 2px tighter. */
  padding: var(--space-md) var(--space-lg);
  border: var(--border-weight-content) solid var(--border);
  border-top: 0;
  background: var(--panel);
  gap: var(--space-md);
}

.research-cta-text {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--body-muted);
  line-height: var(--lh-snug);
}

.research-cta-link {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-chrome);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  /* 20→24 sides = 4px wider button. Symmetric, no optical correction
     here — the original 12/20 was already symmetric. */
  padding: var(--space-sm) var(--space-lg);
  min-height: 44px;
  border: var(--border-weight-chrome) solid var(--border);
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--motion-med) var(--ease-default);
}

.research-cta-link:hover {
  opacity: .8;
}

/* ── Email signup ─────────────────────────────────────────
 * Sits below the share bar, continues the bordered panel
 * stack with no top border. Zero-friction: email only,
 * native HTML5 validation, Mailchimp POST. No JS deps.
 * --------------------------------------------------------- */

.email-signup {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: var(--space-chrome) var(--space-lg);
  border: var(--border-weight-content) solid var(--border);
  border-top: 0;
  background: var(--panel);
}

.email-signup-label {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--body-muted);
  display: flex;
  align-items: center;
  margin-right: auto;
  padding-right: var(--space-md);
  white-space: nowrap;
}

.email-signup-fields {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-shrink: 0;
}

.email-signup-input {
  font-family: var(--body);
  font-size: var(--text-label);
  color: var(--ink);
  background: var(--bg);
  border: var(--border-weight-chrome) solid var(--border);
  padding: var(--space-xs) var(--space-sm);
  min-height: 44px;
  min-width: 200px;
  outline: none;
  transition: border-color var(--motion-fast) var(--ease-default);
}

.email-signup-input::placeholder {
  color: var(--body-muted);
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.email-signup-input:focus-visible {
  border-color: var(--focus-ring);
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: -2px;
}

.email-signup-submit {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-chrome);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  padding: var(--space-xs) var(--space-chrome);
  min-height: 44px;
  border: var(--border-weight-chrome) solid var(--border);
  border-left: 0;
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--motion-med) var(--ease-default);
}

.email-signup-submit:hover {
  opacity: .8;
}

.email-signup-submit:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Honeypot — visually hidden, keeps bots out */
.email-signup-hp {
  position: absolute;
  left: -5000px;
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 520px) {
  .email-signup {
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
  }
  .email-signup-label {
    margin-right: 0;
    padding-right: 0;
    margin-bottom: var(--space-hairline);
  }
  .email-signup-fields {
    width: 100%;
  }
  .email-signup-input {
    flex: 1;
    min-width: 0;
  }
}

/* ── Signup success state ── */
.email-signup--done .email-signup-label {
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  letter-spacing: normal;
  text-transform: none;
}

/* ── Previous / Next essay nav ─────────────────────────────
 * Sits below the share bar, above the Back link.
 * Two columns on wider viewports, stacks on mobile.
 * If only one direction exists (first/last article), the
 * single link spans the full row. -------------------------- */

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl); /* 36→32 */
  padding-top: var(--space-xl); /* 28→32 */
  border-top: var(--border-weight-content) solid var(--border);
}

.article-nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs); /* 6→8 */
  /* 18→16 snap, symmetric. 2px tighter top — imperceptible at
     88px min-height. Not treating as optical correction. */
  padding: var(--space-md);
  border: var(--border-weight-chrome) solid var(--border);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  min-height: 88px;
  transition: border-color var(--motion-fast) var(--ease-default);
}

.article-nav-next {
  align-items: flex-end;
  text-align: right;
}

.article-nav-link:only-child {
  grid-column: 1 / -1;
}

.article-nav-label {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--track-tag);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  color: var(--body-muted);
}

.article-nav-title {
  font-family: var(--display);
  font-size: var(--text-h3);
  /* Phase 5 exception — .95 is a tuned ratio for short nav titles
     that sits between --lh-display (.86) and --lh-tight (1.05). */
  line-height: .95;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  color: var(--ink);
}

.article-nav-link:hover {
  border-color: var(--accent);
}

.article-nav-link:hover .article-nav-label {
  color: var(--accent-text);
}

@media (max-width: 640px) {
  .article-nav {
    grid-template-columns: 1fr;
  }

  .article-nav-next {
    align-items: flex-start;
    text-align: left;
  }
}

/* ── Article back link ─────────────────────────────────────── */

.article-back {
  display: inline-block;
  margin-top: var(--space-md);
  /* Phase 6 exception — 11px bottom = 1px optical pull up from
     --space-sm (12px), centering uppercase chrome on the button. */
  padding: var(--space-sm) var(--space-chrome) 11px;
  min-height: 44px;
  border: var(--border-weight-chrome) solid var(--border);
  background: var(--panel);
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-chrome);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}

.article-back:hover {
  border-color: var(--accent);
}

/* ── Focus states (article elements) ───────────────────────── */

.share-link:focus-visible,
.subscribe-link:focus-visible,
.research-cta-link:focus-visible,
.article-back:focus-visible,
.article-nav-link:focus-visible,
.article-body a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px; /* focus-ring geometry, scope-excluded */
}

/* ── Reading progress bar ──────────────────────────────────── */

/* Reading progress uses --ink rather than --accent so the red accent
 * stays reserved for section heads, callouts, and underlines. A red
 * bar at the top of the viewport was competing with the masthead. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--ink);
  z-index: 9999;
  transition: width var(--motion-fast) linear;
  pointer-events: none;
}

/* ── Section indicator ─────────────────────────────────────── */

.section-indicator {
  position: fixed;
  /* 28→32 bottom/left position snap. Floating label, visual change
     imperceptible against viewport edge. */
  bottom: var(--space-xl);
  left: var(--space-xl);
  z-index: 9998;
  font-family: var(--mono);
  font-size: var(--text-meta);
  letter-spacing: var(--track-indicator);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border: var(--border-weight-content) solid var(--ink);
  padding: var(--space-xs) var(--space-sm); /* 6→8 top/bottom */
  opacity: 0;
  transition: opacity var(--motion-slow) ease;
  pointer-events: none;
  max-width: 260px; /* intrinsic label width, scope-excluded */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section-indicator.visible {
  opacity: 1;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 760px) {
  .article-header {
    /* 20→24, 18→16. Content frame loosens slightly on mobile. */
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }

  .article-body {
    /* 28→32 top, 36→32 bottom. Symmetric on mobile. */
    padding: var(--space-xl) var(--space-md);
  }

  .share-bar {
    padding: var(--space-sm) var(--space-md);
    flex-wrap: wrap;
  }

  .research-cta {
    flex-direction: column;
    padding: var(--space-md);
    align-items: flex-start;
  }

  .research-cta-link {
    width: 100%;
    text-align: center;
  }

  .pull-quote {
    margin: var(--space-xl) calc(-1 * var(--space-md));
    padding: var(--space-lg) var(--space-md);
  }

  .stat-block {
    /* 36→32 */
    margin: var(--space-xl) calc(-1 * var(--space-md));
    padding: 0 var(--space-md);
  }

  .section-indicator {
    bottom: var(--space-md);
    left: var(--space-md);
    /* Phase 5 exception — responsive step-down from --text-meta
       (.6rem) for narrow viewports. Not a ramp value. */
    font-size: .52rem;
    max-width: 200px; /* intrinsic label width, scope-excluded */
  }
}