// The standard content column for every route except `/`.
//
// The root layout's <main> is deliberately full-bleed: the home page is built
// from edge-to-edge rules and banded sections that must reach the viewport
// edges. Every other page opts back into a measured column through this, so the
// container lives in one place rather than being re-typed per route.
export function PageShell({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={`w-full max-w-6xl mx-auto px-5 sm:px-6 py-10 sm:py-14 ${className ?? ""}`}
    >
      {children}
    </div>
  );
}

// A page's title block: machine eyebrow, display title, optional standfirst.
// Consistent across docs, downloads, stats and the 404 so the site reads as one
// instrument rather than four pages that happen to share a header.
export function PageHeading({
  eyebrow,
  title,
  standfirst,
}: {
  eyebrow?: string;
  title: string;
  standfirst?: string;
}) {
  return (
    <div className="flex flex-col gap-3 doc-measure">
      {eyebrow && <span className="label-machine">{eyebrow}</span>}
      <h1 className="font-display text-[1.75rem] sm:text-[2.15rem] font-semibold leading-[1.1] tracking-[-0.01em] text-[var(--foreground)]">
        {title}
      </h1>
      {standfirst && (
        <p className="text-[1.0625rem] leading-relaxed text-[var(--muted-foreground)]">
          {standfirst}
        </p>
      )}
    </div>
  );
}