:root {
    --background-color: #000000;
    --logo-color: #6b6b6b;
}

/* Title */
.ison-title {
    line-height: 1;
}

.ison-eyebrow {
    display: block;
    font-size: 0.7em;
    opacity: 0.7;
}

.ison-title-svg {
    display: block;
    height: 1.3em;
    width: auto;
    fill: currentColor;
}

/* Layer 1: Chemical staining — warm amber/sepia blobs over black */
body {
    background-color: #000;
    background-image:
        radial-gradient(ellipse 60% 40% at 15% 20%, rgba(55, 80, 55, 0.30) 0%, transparent 70%),
        radial-gradient(ellipse 40% 55% at 80% 10%, rgba(38, 68, 45, 0.24) 0%, transparent 65%),
        radial-gradient(ellipse 50% 35% at 70% 75%, rgba(45, 78, 52, 0.27) 0%, transparent 60%),
        radial-gradient(ellipse 30% 45% at 30% 85%, rgba(35, 62, 42, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 55% 30% at 50% 50%, rgba(28, 50, 34, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 25% 50% at 90% 45%, rgba(42, 72, 48, 0.23) 0%, transparent 60%);
}

/* Layer 2: Film grain via SVG feTurbulence */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.12;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23grain)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 150px 150px;
}

/* Layer 3: Vignette — darkens edges toward black */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
}

/* Ensure page content sits above pseudo-element layers */
.page {
    position: relative;
    z-index: 1;
}

/* Layer 4: Film scratches — two displaced vertical lines */
.page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080'%3E%3Cdefs%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01%200.6' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cline x1='320' y1='0' x2='320' y2='1080' stroke='white' stroke-width='1.5' filter='url(%23s)' opacity='0.28'/%3E%3Cline x1='1280' y1='0' x2='1280' y2='1080' stroke='white' stroke-width='1' filter='url(%23s)' opacity='0.20'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}