/* Nesteia — one page per body stage (/stages/<slug>, built by Scripts/build-stage-pages.py). Linked only from those pages,
   after styles.css, whose tokens and classes it reuses: .section-head, .eyebrow, .lede, .conf (the word in a pill led by
   the filled circle), .sources-list, .more, .btn. Dusk is the stages tone; links stay tide. No new colours. */

/* The page sits inside Stages: the section link carries aria-current="true", styled as the page link is. */
.site-nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--tide); }
.site-foot a[aria-current="true"] { color: var(--ink); }

.stage-page { border-top: 0; padding-block: 1.5rem 2.25rem; }
@media (min-width: 900px) { .stage-page { padding-block: 2rem 2.75rem; } }

.sp-crumb { margin-bottom: 1rem; }
.sp-crumb a { color: var(--tide); }
.stage-page .section-head { margin-bottom: 1.75rem; }
.stage-page .eyebrow { font-size: 0.8rem; }
.stage-page .lede { color: var(--ink); max-width: 56ch; }

/* Confidence and tier on one line under the lede, set as the strip cards on /stages set them. */
.sp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; max-width: none; }
.stage-page .sp-meta { margin-top: 1rem; }
.sp-meta .conf { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; color: var(--dusk); }
.sp-meta .conf .lvl {
  order: 0;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: var(--dusk-soft);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3;
  white-space: nowrap;
}
.sp-meta .conf .src { order: 1; font-size: 0.8rem; color: var(--stone); line-height: 1.3; }
.sp-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone); }
.sp-tag[data-tier="free"] { color: var(--tide); }
.sp-tag[data-tier="beyond"] { font-style: italic; }
.stage-page.beyond h1 { color: var(--stone); }

/* The plan line for the stages from 48 hours: a quiet rule in the stages tone, never ember (that is kept for stop copy). */
.stage-page .sp-note { margin-top: 1rem; padding-left: 0.75rem; border-left: 2px solid var(--dusk); font-size: 0.95rem; color: var(--ink); max-width: 60ch; }
.sp-note b { font-weight: 600; }

/* Measured, feel, do: one column on phones, three from 900 px, each under its own hairline with a short dusk tick,
   the same mark the strip cards carry. */
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 900px) { .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; } }
.sp-block { position: relative; border-top: 1px solid var(--hairline); padding-top: 0.875rem; }
.sp-block::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 3px; background: var(--dusk); }
.sp-block h2 { color: var(--dusk); }
.sp-block p { margin-top: 0.5rem; font-size: 0.975rem; }

.sp-sources .sources-list { margin-top: 0.5rem; columns: auto; }   /* two or three papers read better as one column */
.sp-safety { margin-top: 1.75rem; max-width: 62ch; }

/* Previous and next: two cards on one row, the next one to the right even when there is no previous. */
.sp-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.75rem; }
.sp-pager a {
  display: grid; gap: 0.125rem; align-content: start;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--hairline); border-radius: 10px;
  text-decoration: none; color: var(--ink);
}
.sp-pager a:hover { border-color: var(--dusk); background: var(--dusk-soft); }
.sp-pager a:focus-visible { outline-color: var(--dusk); }
.sp-pager .sp-next { grid-column: 2; text-align: right; }
.sp-dir { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tide); }
.sp-name { font-weight: 500; line-height: 1.25; }
.sp-hrs { font-size: 0.8rem; color: var(--stone); }
.sp-pager a:hover .sp-hrs { color: var(--ink); }   /* stone falls under 4.5:1 on dusk-soft */
@media (max-width: 480px) {
  .sp-pager { grid-template-columns: minmax(0, 1fr); }
  .sp-pager .sp-next { grid-column: auto; text-align: left; }
}

@media print {
  .sp-pager a { border-color: var(--stone); }
}

/* Each source's own title, journal and year under its author-year link (Scripts/paper-metadata.json). */
.sp-src-title { display: block; margin-top: 0.15rem; font-size: 0.85rem; line-height: 1.4; color: var(--stone); }