/* Page heroes (inner pages) — Abyssal Ink, left-aligned (template pattern 1, smaller) */
.page-hero {
  background: var(--ink); color: var(--on-dark);
  padding-block: var(--space-6);
}
.page-hero h1 { color: var(--on-dark); font-size: clamp(38px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.03em; margin-left: -0.04em; }
.page-hero p.lead { margin-top: 16px; color: var(--on-dark-soft); }
.page-hero .kicker { color: var(--sage); }

/* Material explorer — ghost mono tabs, lime active (template pattern 5) */
.explorer {
  background: var(--surface); border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-card); padding: 40px;
}
.explorer h2.kicker { margin-bottom: 16px; }
.explorer__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.explorer__tab {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.02em;
  text-transform: uppercase;
  border: var(--border-w) solid var(--sage); background: transparent;
  color: var(--slate);
  border-radius: var(--radius-btn); padding: 8px 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.explorer__tab:hover { border-color: var(--border); color: var(--ink); }
.explorer__tab[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.explorer__output h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: clamp(22px, 2vw, 36px); margin-bottom: 10px; }
.stream-meta { font-size: 15px; color: var(--slate); margin-bottom: 14px; }
.stream-meta strong { font-weight: 450; color: var(--ink); }

/* Contact details — white cards */
.contact-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3);
  margin-block: var(--space-4);
}
.contact-details > div {
  background: var(--surface); border: var(--border-w) solid var(--border-soft);
  border-radius: 20px 20px 0 20px; padding: 30px;
}
.contact-details h3 { font-size: 20px; margin-bottom: 10px; }
.contact-details p, .contact-details a { font-size: 15px; }
.contact-details a { text-decoration: none; }
.contact-details a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-details small { font-family: var(--font-mono); font-size: 12px; color: var(--border); }
@media (max-width: 800px) { .contact-details { grid-template-columns: 1fr; } }

/* Honest-dispatch note — mono caption bar */
.dispatch-note {
  background: var(--surface-2); border: var(--border-w) solid var(--border-soft);
  border-radius: var(--radius-btn); padding: 14px 18px;
  font-family: var(--font-mono); font-size: 13px; color: var(--slate); max-width: none;
}
.stage-list { list-style: none; padding: 0; display: grid; gap: 12px; margin: 14px 0; }
.stage-list li {
  display: flex; gap: 12px; align-items: baseline;
  border-top: var(--border-w) solid var(--border-soft); padding-top: 12px; font-size: 16px;
}
.stage-list .stage-no {
  font-family: var(--font-mono); font-size: 13px; color: var(--border); min-width: 44px;
}