:root {
    /* Palette — editorial cream, deep ink, ember accent */
    --color-ink:        #0E0E0E;
    --color-ink-soft:   #1A1A1A;
    --color-bone:       #F4F1EC;
    --color-bone-warm:  #EDE8DF;
    --color-paper:      #FAF7F2;
    --color-paper-soft: #F7F3EC;
    --color-line:       #D9D2C5;
    --color-line-soft:  rgba(14, 14, 14, 0.08);
    --color-mute:       #6B655C;
    --color-mute-soft:  #938C81;
    --color-ember:      #D44512;
    --color-ember-deep: #B53908;
    --color-ember-soft: #F4E5DC;
    --color-moss:       #3E5240;
    --color-white:      #FFFFFF;

    /* Typography */
    --font-display: "Bricolage Grotesque", "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif:   "Instrument Serif", Georgia, serif;
    --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Scale */
    --container-max: 1360px;
    --section-pad: clamp(80px, 10vw, 140px);
    --nav-h: 76px;

    /* Motion */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
    --t-fast: 180ms;
    --t-med:  420ms;
    --t-slow: 720ms;
}

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

html {
    scroll-behavior: smooth;
    background: var(--color-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    background: var(--color-paper);
    color: var(--color-ink);
    line-height: 1.55;
    font-size: 16px;
    font-weight: 400;
    overflow-x: hidden;
    letter-spacing: -0.005em;
    cursor: none;
}

/* Subtle paper grain — constant, atmospheric, never distracting */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Vignette-warmth at page edges */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    background: radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(212, 69, 18, 0.035) 100%);
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: none; }

::selection { background: var(--color-ink); color: var(--color-bone); }

/* Typography presets */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--color-ink);
}

/* Thin divider line used throughout */
.rule {
    height: 1px;
    background: var(--color-line);
    width: 100%;
    transform-origin: left center;
}

/* Utility: clamp text to 2-3 lines gracefully */
.measure { max-width: 62ch; }