/* content.css — additive styles for editorial content (source citations).
   Kept separate from site.css so the design token layer stays untouched. */
.src-note{
  font-family:var(--mono);
  font-size:0.72rem;
  line-height:1.5;
  color:var(--p-soft);
  margin-top:0.7rem;
  letter-spacing:0.01em;
}
.src-note a{
  color:var(--p-soft);
  text-decoration:underline;
  text-underline-offset:2px;
}
.src-note a:hover{ color:var(--p-ink); }

/* inline figures inside prose articles */
.prose-fig{ margin:1.5rem 0; }
.prose-fig img{ width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 12px 34px -14px #000; }
.prose-fig figcaption{ font-family:var(--mono); font-size:0.74rem; color:var(--p-soft); margin-top:0.5rem; letter-spacing:0.01em; }
.prose img{ max-width:100%; height:auto; }

/* footer CRT tune-in toggle */
.tunein-toggle{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-soft); background:transparent; cursor:pointer;
  padding:0.32rem 0.66rem; border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--chrome-line);
  transition:color 0.15s, box-shadow 0.15s;
}
.tunein-toggle:hover{ color:var(--cyan); box-shadow:inset 0 0 0 1px var(--cyan-d); }
.tunein-toggle .tunein-state{ color:var(--cyan); }
.tunein-toggle[aria-pressed="false"] .tunein-state{ color:var(--ink-soft); }

/* comment section lead-in */
.comment-lead{ font-size:0.98rem; color:var(--p-ink); margin:-0.2rem 0 1rem; font-weight:500; }

/* entry up/down voting */
.entry__vote{ display:flex; align-items:center; gap:0.5rem; margin-top:1rem; flex-wrap:wrap; }
.entry__vote-label{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--p-soft); margin-right:0.15rem; }
.vbtn{ display:inline-flex; align-items:center; gap:0.35rem; font-family:var(--mono); font-weight:700; font-size:0.8rem; color:var(--p-soft); padding:0.35rem 0.62rem; border-radius:7px; box-shadow:inset 0 0 0 1px var(--paper-line); background:transparent; cursor:pointer; transition:color .15s, box-shadow .15s; }
.vbtn svg{ width:16px; height:16px; }
.vbtn--up:hover, .vbtn--up[aria-pressed="true"]{ color:#1c7d3f; box-shadow:inset 0 0 0 1px #3fbf6a; }
.vbtn--down:hover, .vbtn--down[aria-pressed="true"]{ color:var(--red-d); box-shadow:inset 0 0 0 1px var(--red); }

/* form status messages + empty comment state */
.form-msg{ font-family:var(--mono); font-size:0.78rem; margin-top:0.5rem; }
.form-msg--ok{ color:#3fbf6a; }
.form-msg--err{ color:var(--red); }
.comment-empty{ color:var(--p-soft); font-style:italic; margin:0.4rem 0; }

/* in-content ad inside a listicle: match the entry gap below it */
.entries .ad--break{ margin-bottom: var(--gap); }

/* standalone content pages (about, privacy, etc.) */
.page-wrap{ background:var(--paper); color:var(--p-ink); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(1.4rem,1rem+2vw,2.6rem); max-width:820px; margin:0 auto; }
.page-wrap h1{ font-family:var(--display); font-size:var(--h2); line-height:1; margin-bottom:0.4rem; text-transform:uppercase; }
.page-wrap h2{ font-family:var(--display); font-size:1.35rem; margin:1.7rem 0 0.6rem; text-transform:uppercase; }
.page-wrap p, .page-wrap li{ color:var(--p-soft); margin-bottom:0.85rem; line-height:1.65; }
.page-wrap a{ color:var(--red-d); text-decoration:underline; text-underline-offset:2px; }
.page-wrap ul{ padding-left:1.2rem; margin-bottom:0.9rem; }
.page-wrap .kicker{ color:var(--red-d); display:block; margin-bottom:0.5rem; }
.page-wrap .muted{ font-family:var(--mono); font-size:0.78rem; color:var(--p-soft); }

/* decade toggle rendered as links (matches the button styling) */
.decade a{ font-family:var(--mono); font-weight:700; font-size:0.75rem; padding:0.35rem 0.6rem; border-radius:6px; color:var(--ink-soft); text-decoration:none; transition:color .15s, background .15s; }
.decade a:hover{ color:var(--ink-text); }
.decade a.on{ background:var(--cyan); color:#062028; }
@media (max-width:1180px){ .decade a{ padding:0.3rem 0.5rem; font-size:0.72rem; } }
/* outro paragraph: same size as body, a touch of separation */
.prose.outro{ margin-top:0.4rem; }
.prose.outro p:first-of-type{ font-size:1rem; color:var(--p-ink); }