:root {
    --ink: #1a1410;
    --parchment: #f5f0e8;
    --aged: #e8dfc8;
    --stone: #8a7e6e;
    --moss: #4a5c3e;
    --rust: #8b3a2a;
    --gold: #c9a84c;
    --shadow: rgba(26,20,16,0.15);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--ink);
    color: var(--parchment);
    font-family: 'Crimson Pro', serif;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Grain texture overlay */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1000;
    opacity: 0.4;
  }

  /* SCREENS */
  .screen { display: none; min-height: 100vh; }
  .screen.active { display: flex; flex-direction: column; }

  /* Scrollbar (relocated from install-banner.css during the landing-page
     conversion — install-banner.css was deleted with the PWA install prompt) */
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: var(--ink); }
  ::-webkit-scrollbar-thumb { background: var(--stone); }