/* ==========================================================================
   Inner pages — About, legal pages and 404.
   ========================================================================== */

.page-hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) var(--space-7);
  border-bottom: 1px solid var(--line);
}
.page-hero .wrap { display: grid; gap: var(--space-5); }
.page-hero h1 { font-size: var(--step-5); max-width: 16ch; }
.page-hero .lede { font-size: var(--step-1); color: var(--ink-3); max-width: 40rem; }
.page-hero .meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-3); }

.page-body { padding-block: var(--space-8) var(--space-section); }
.page-body__grid { display: grid; gap: var(--space-7); }
@media (min-width: 62rem) {
  .page-body__grid { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-9); }
  .page-toc { position: sticky; top: 6rem; align-self: start; }
}

.page-toc h2 { font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-3); }
.page-toc ol { display: grid; gap: var(--space-2); padding: 0; list-style: none; counter-reset: toc; }
.page-toc li { counter-increment: toc; }
.page-toc a { display: flex; gap: var(--space-3); color: var(--ink-2); text-decoration: none; font-size: var(--step--1); }
.page-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); color: var(--ink-3); }
.page-toc a:hover { color: var(--ink); }

/* Long-form text */
.prose { max-width: var(--maxw-prose); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--step-3); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-6); }
.prose ul { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--signal); }
.prose strong { color: var(--ink); }

/* About: principles grid */
.principles { display: grid; gap: var(--space-5); margin-top: var(--space-6) !important; padding: 0; list-style: none; }
@media (min-width: 40rem) { .principles { grid-template-columns: 1fr 1fr; } }
.principles li { margin: 0 !important; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.principles li::marker { content: none; }
.principles b { display: block; color: var(--ink); font-size: var(--step-1); font-stretch: var(--stretch-display); margin-bottom: var(--space-2); }
.principles span { font-family: var(--font-mono); font-size: var(--step--2); color: var(--signal); }

.page-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7) !important; }

/* 404 */
.not-found { padding-block: var(--space-section); }
.not-found .wrap { display: grid; gap: var(--space-5); justify-items: start; }
.not-found__num {
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(7rem, 4rem + 18vw, 16rem);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 2px var(--signal);
}
.not-found ul { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; list-style: none; }