/* ── 404 page (extracted from inline <style>; consolidate shared rules into main.css) ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --rose: #cc3366;
      --rose-dark: #a82a54;
      --ink: #1a1814;
      --text: #333;
      --text-muted: #6b7280;
      --font-display: 'DM Serif Display', Georgia, serif;
      --font-body: 'Inter', system-ui, sans-serif;
    }
    body {
      font-family: var(--font-body);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
      background: #fafaf8;
    }
    .error-code {
      font-family: var(--font-display);
      font-size: clamp(5rem, 15vw, 10rem);
      color: var(--rose);
      line-height: 1;
      margin-bottom: 0.5rem;
    }
    h1 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 4vw, 2rem);
      color: var(--ink);
      margin-bottom: 1rem;
    }
    p {
      color: var(--text-muted);
      font-size: 1.05rem;
      max-width: 480px;
      margin-bottom: 2rem;
      line-height: 1.6;
    }
    .btn {
      display: inline-block;
      background: var(--rose);
      color: #fff;
      padding: 0.85rem 2rem;
      border-radius: 4px;
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
      transition: background 0.2s;
    }
    .btn:hover { background: var(--rose-dark); }