/* ============================================================
Influencer Advisory - motion homepage
Plain static site. Fonts self-hosted (Google Fonts, free).
============================================================ */
/* professional type system (Source superfamily), global across EVERY page so the
styling stays consistent site-wide. @import must stay first (before @font-face). */
/* Source fonts load via the , not @import — a cross-origin @import
here breaks Microsoft Clarity style capture (recordings play back unstyled). */
/* ---- fonts ---- */
@font-face{font-family:'Vina Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/vinasans-normal-400.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/instrumentserif-normal-400.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/instrumentserif-italic-400.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/archivo-normal-100_900.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibmplexmono-normal-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/ibmplexmono-normal-700.woff2') format('woff2');}
/* ---- tokens ---- */
:root{
--ink:#0a0a0a;
--black:#000;
--paper:#f2f2f2;
--paper-ink:#111;
--gray-body:#565656;
--gray-unfilled:#c9c9c6;
/* theme tokens - every accent color on the page routes through these;
palettes below override them via html[data-palette] */
--grad-lo:#ffbaba;
--grad-hi:#ffffff;
--glow-rgb:122 16 20; /* main colored glow, used as rgb(var(--glow-rgb) / a) */
--glow-deep-rgb:74 10 14; /* darker companion glow */
--accent:#e0201c; /* About italic accent + selection */
--font-display:'Source Serif 4', Georgia, serif;
--font-serif:'Source Serif 4', Georgia, serif;
--font-body:'Source Sans 3', Arial, sans-serif;
--font-mono:'Source Code Pro', 'Courier New', monospace;
--radius:24px;
--inset:0; /* full-bleed dark cards: no paper border/fold (Dennis 2026-07-05) */
--gutter:24px;
--grad-display:linear-gradient(0deg, var(--grad-lo) 0%, var(--grad-hi) 75%);
}
/* ---- palettes (preview with /?palette, deep-link /?palette=, bake in by changing DEFAULT_PALETTE in main.js) ---- */
/* blue family: each retints --black so the dark cards go deep blue too */
html[data-palette="navy"]{
--black:#060d1f;--ink:#060d1f;
--grad-lo:#a9c6f2;--grad-hi:#f4f8ff;
--glow-rgb:36 74 156;--glow-deep-rgb:14 32 78;
--accent:#2f5fd0;
}
html[data-palette="deeppro"]{
--black:#030a16;--ink:#030a16;
--grad-lo:#4f79cf;--grad-hi:#c4d8ff;
--glow-rgb:10 30 86;--glow-deep-rgb:5 13 42;
--accent:#153a80;
}
html[data-palette="midnight"]{
--black:#03081a;--ink:#03081a;
--grad-lo:#7d9fd4;--grad-hi:#e8f0ff;
--glow-rgb:22 42 104;--glow-deep-rgb:8 18 52;
--accent:#20408f;
}
html[data-palette="royal"]{
--black:#071233;--ink:#071233;
--grad-lo:#9db8ff;--grad-hi:#f0f4ff;
--glow-rgb:44 78 200;--glow-deep-rgb:18 34 104;
--accent:#2f55d4;
}
html[data-palette="cobalt"]{
--black:#050c26;--ink:#050c26;
--grad-lo:#6f8fe8;--grad-hi:#dbe6ff;
--glow-rgb:30 58 170;--glow-deep-rgb:12 26 88;
--accent:#2244cc;
}
html[data-palette="electric"]{
--black:#041420;--ink:#041420;
--grad-lo:#7fd4ff;--grad-hi:#f0fbff;
--glow-rgb:0 116 200;--glow-deep-rgb:0 54 100;
--accent:#00a6ff;
}
html[data-palette="ice"]{
--black:#0a1526;--ink:#0a1526;
--grad-lo:#cfe4ff;--grad-hi:#ffffff;
--glow-rgb:88 128 190;--glow-deep-rgb:40 62 100;
--accent:#6ea8e8;
}
html[data-palette="steel"]{
--black:#0b141e;--ink:#0b141e;
--grad-lo:#a9bccf;--grad-hi:#f2f6fa;
--glow-rgb:62 84 112;--glow-deep-rgb:28 40 56;
--accent:#5b7a99;
}
html[data-palette="champagne"]{--grad-lo:#f1dfae;--grad-hi:#fffdf6;--glow-rgb:120 94 22;--glow-deep-rgb:66 52 12;--accent:#b08a2e;}
html[data-palette="classic24k"]{--grad-lo:#f0d06b;--grad-hi:#fffaf0;--glow-rgb:133 102 15;--glow-deep-rgb:74 57 8;--accent:#d4af37;}
html[data-palette="satin"]{--grad-lo:#e8ce8c;--grad-hi:#ffffff;--glow-rgb:115 90 30;--glow-deep-rgb:64 50 17;--accent:#a9852b;}
html[data-palette="amber"]{--grad-lo:#efc15a;--grad-hi:#fff6e3;--glow-rgb:140 96 10;--glow-deep-rgb:78 53 6;--accent:#c68e17;}
html[data-palette="deepgold"]{--grad-lo:#a87e22;--grad-hi:#ecdcb0;--glow-rgb:86 60 10;--glow-deep-rgb:44 30 5;--accent:#8f6914;}
html[data-palette="antique"]{--grad-lo:#d9b968;--grad-hi:#f7eedc;--glow-rgb:105 82 20;--glow-deep-rgb:58 45 11;--accent:#8c6d1f;}
html[data-palette="bronze"]{--grad-lo:#d9a94f;--grad-hi:#fff3de;--glow-rgb:120 85 15;--glow-deep-rgb:66 47 8;--accent:#9c7a17;}
html[data-palette="bright"]{--grad-lo:#ffd700;--grad-hi:#fffff0;--glow-rgb:160 120 0;--glow-deep-rgb:88 66 0;--accent:#e6c200;}
/* ---- base ---- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;overflow-x:clip;} /* clip subpixel/fixed-header overflow so mobile never scrolls sideways; clip (not hidden) keeps position:sticky working */
body{
font-family:var(--font-body);
background:var(--paper);
color:var(--paper-ink);
overflow-x:clip; /* clip, NOT hidden: hidden makes body a scroll container (overflow-y->auto) and breaks position:sticky (the process media stage) */
-webkit-font-smoothing:antialiased;
}
::selection{background:var(--grad-lo);color:var(--ink);}
img,video,canvas{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer;}
main{position:relative;}
/* ---- film grain, two layers ----
.grain = fixed full-viewport noise at 5% (matches live site's grain_overlay)
.film-grain = per-media overlay at 14% + soft-light, for footage cards.
NOTE for future footage: keep .film-grain on the wrapper of every real