/* JOM Marketing — shared design tokens */
:root {
  /* Brand core (from logo) */
  --jom-deep: #1E0A3C;          /* deep purple */
  --jom-deeper: #140627;        /* even deeper */
  --jom-ink: #0B0418;           /* near-black */
  --jom-plum: #2A0F52;          /* mid purple */
  --jom-violet: #4B1B8F;        /* accent violet */

  /* Accent hot pink (from posts) */
  --jom-pink: #E91E7A;
  --jom-pink-hot: #FF2E88;
  --jom-pink-soft: #F48FB1;

  /* Neutrals */
  --jom-cream: #FAF7F2;
  --jom-off: #F1ECE4;
  --jom-paper: #FFFFFF;
  --jom-smoke: #E8E3DA;
  --jom-graphite: #2B2430;
  --jom-mute: #6E6578;

  /* Secondary accents (tweakable) */
  --jom-accent: var(--jom-pink);
  --jom-yellow: #F7D14A;
  --jom-cyan: #6EE6FF;

  /* Type */
  --font-display: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Fraunces", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Utility */
.jom-mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.jom-kbd { display: inline-flex; align-items: center; gap: 6px; }
.jom-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Reveal on scroll — only hide when JS is actually going to reveal it */
.js-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js-ready .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal { opacity: 1; transform: none; transition: none; }
}

/* Marquee */
@keyframes jom-marquee { to { transform: translateX(-50%); } }
.jom-marquee-track { display: flex; gap: 48px; width: max-content; animation: jom-marquee 40s linear infinite; }

/* Placeholder image */
.jom-ph {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #2A0F52, #14082C);
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  border-radius: 6px;
}
.jom-ph.light {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #EEE8DD, #E3DBCB);
  color: rgba(0,0,0,.45);
}

/* Selection */
::selection { background: var(--jom-pink); color: white; }
</content>
</invoke>