body,
  html {
    margin: 0;
    padding: 0;
    font-family: var(--hf-font-family);
    color: var(--hf-text-normal);
    background: var(--hf-bg-base);
    min-height: 100vh;
  }

  h1 {
    margin-top: 0;
    margin-bottom: 0;
  }

  a {
    color: var(--hf-link-color);
    text-decoration: none;
  }

  a:hover {
    color: var(--hf-link-hover);
  }

  /* The site header (sticky DSL shader bar, logo) is the <nf-header>
     component — markup, DSL program, and styles live in
     js/nf-header.js + css/nf-header.css. Style the header only there. */

  /* ============================================================
     Centered 1000px container — matches noisefactor.io
     ============================================================ */
  .nf-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1rem;
  }

  .content-column {
    color: var(--hf-text-dim);
  }

  /* ============================================================
     Hero — the page's single greeting
     ============================================================ */
  .nf-hero {
    padding: 8rem 0 6rem;
  }

  .nf-hero-title {
    display: block;
    font-size: clamp(4rem, 14vw, 9rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--hf-text-normal);
  }

  /* ============================================================
     Status / footer link row
     ============================================================ */
  .status-link {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--hf-text-dim);
    text-align: center;
    opacity: 0.75;
  }

  .status-link a {
    text-decoration: none;
    color: inherit;
  }

  .status-link a:hover {
    color: var(--hf-text-bright);
  }

  /* ============================================================
     Responsive
     ============================================================ */
  @media (max-width: 720px) {
    .nf-hero {
      padding: 5rem 0 4rem;
    }
  }