/* ==========================================================================
   Shared site styles — design tokens and base rules used across every page.
   Individual pages keep their own <style> block for page-specific layout;
   this file only holds what's genuinely common: the color palette, the
   base reset, and the grain-texture / top-bar treatment.
   ========================================================================== */

:root {
    --orange:  #F74902;
    --red:     #8C1C1C;
    --manila:  #EDD9A3;
    --ink:     #1C2A2F;
    --ink-alt: #36454F;
    --cream:   #FDFCF1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Source Code Pro', monospace;
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}

/* Grain texture + orange top bar. Opt in with class="textured" on <body>. */
body.textured::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.042;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

body.textured::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--orange);
    z-index: 100;
}
