/* =============================================================================
   Blog / advice column styles ("Dear Root")
   =============================================================================
   Page-specific. Loaded by /blog/ and the individual letter pages on top of
   site.css. Reuses .game-grid / .game-card for the index listing; this file
   only adds the letter-reading layout (inbound question, reply, signatures).
   ============================================================================= */

/* Index: each card is an advice letter. Reuses .game-card from site.css. */
.letter-card .badge {
  color: var(--accent-cyan);
}

/* A single letter, reading view. Slightly wider than .surface-prose so the
   reply doesn't feel cramped, but still a comfortable measure. */
.letter {
  max-width: 42rem;
}

.letter .letter-meta {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  margin: 0 0 var(--space-3);
}

.letter h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
}

/* The incoming letter: set apart with a left accent rule and a quieter tone,
   so the reader can tell the question from the answer without relying on
   position alone (color is never the only signal: the rule + the label do it). */
.letter .inbound {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent-magenta);
  background: rgba(19, 19, 25, 0.6);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.letter .inbound p {
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

.letter .inbound p:last-child {
  margin-bottom: 0;
}

.letter .salutation {
  font-weight: 600;
  color: var(--text-primary);
}

.letter .signed {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-align: right;
}

/* The reply: normal prose, the primary voice of the page. */
.letter .reply p {
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
  line-height: 1.6;
}

.letter .reply .salutation {
  color: var(--text-primary);
}

.letter .reply-sign {
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: var(--space-2) 0 0;
}

/* Prev / index / next footer nav inside a letter. */
.letter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--font-size-sm);
}

.letter-nav a {
  color: var(--text-secondary);
}

.letter-nav a[aria-disabled='true'] {
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.5;
}