/* JAS Cleaning 404 page styles — ported verbatim from src/website/404.html <style> block.
   Linked from the Next /404 route via PageStyles (precedence jas-4-page) so the page renders
   pixel-for-pixel like the finalized static page. */

  .nf-hero { padding: 80px 56px 64px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; max-width: 1280px; margin: 0 auto; }
  .nf-hero .num { font-family: var(--display); font-size: 220px; line-height: 1; letter-spacing: -0.03em; color: var(--leaf); font-style: italic; }
  .nf-hero h1 { font-family: var(--display); font-size: 64px; line-height: 1; letter-spacing: -0.02em; margin: 16px 0; font-weight: 400; }
  .nf-hero h1 em { color: var(--leaf); font-style: italic; }
  .nf-hero .lead { font-size: 17px; color: var(--ink-2); max-width: 480px; line-height: 1.55; margin-bottom: 28px; }
  .nf-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .nf-quick { padding: 32px 56px 64px; max-width: 1280px; margin: 0 auto; border-top: 1px solid var(--line-soft); }
  .nf-quick .eb { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; }
  .nf-quick h2 { font-family: var(--display); font-size: 32px; letter-spacing: -0.01em; font-weight: 400; margin: 8px 0 22px; }
  .nf-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .nf-link { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; text-decoration: none; color: inherit; transition: transform var(--t-base) var(--ease-out), border-color var(--t-fast) ease; }
  .nf-link:hover { transform: translateY(-2px); border-color: var(--ink-3); }
  .nf-link .ic { font-family: var(--display); font-size: 28px; color: var(--leaf); }
  .nf-link .name { font-family: var(--display); font-size: 18px; margin-top: 8px; letter-spacing: -0.01em; }
  .nf-link .desc { font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }
  @media (max-width: 900px) {
    .nf-hero { grid-template-columns: 1fr; padding: 40px 24px 32px; gap: 24px; }
    .nf-hero .num { font-size: 140px; }
    .nf-hero h1 { font-size: 40px; }
    .nf-quick { padding: 24px 24px 48px; }
    .nf-links { grid-template-columns: 1fr 1fr; }
  }