/* ==========================================================================
   CHRYSTAL MATH — GENERAL-PURPOSE STYLESHEET
   "Calculated Chaos." brand system v1.1
   Drop this file (+ the /fonts folder next to it) into any project.
   All fonts: SIL Open Font License 1.1 — free for commercial use.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS (self-hosted, no external requests)
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Bodoni Moda'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/BodoniModa-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda'; font-weight:500; font-style:normal; font-display:swap;
  src:url('fonts/BodoniModa-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda'; font-weight:600; font-style:normal; font-display:swap;
  src:url('fonts/BodoniModa-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda'; font-weight:700; font-style:normal; font-display:swap;
  src:url('fonts/BodoniModa-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda'; font-weight:800; font-style:normal; font-display:swap;
  src:url('fonts/BodoniModa-ExtraBold.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda'; font-weight:400; font-style:italic; font-display:swap;
  src:url('fonts/BodoniModa-Italic.woff2') format('woff2');
}
@font-face{
  font-family:'Bodoni Moda'; font-weight:600; font-style:italic; font-display:swap;
  src:url('fonts/BodoniModa-SemiBoldItalic.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/Poppins-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap;
  src:url('fonts/Poppins-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap;
  src:url('fonts/Poppins-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap;
  src:url('fonts/Poppins-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/Fraunces-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-weight:600; font-style:normal; font-display:swap;
  src:url('fonts/Fraunces-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-weight:600; font-style:italic; font-display:swap;
  src:url('fonts/Fraunces-SemiBoldItalic.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* core gradient colors, from the logo */
  --chaos-pink:       #F03A82;
  --chaos-pink-deep:  #6F235C;
  --chaos-orchid:     #B744C4;
  --chaos-violet:     #645EE9;
  --chaos-cyan:       #02AFF1;
  --chaos-cyan-deep:  #096089;
  --chaos-gold:       #E3B63E;

  /* background — Mitternachtsblau, darkened for max color pop */
  --bg:               #070C1F;
  --bg-raised:        #0D1430;   /* one step up, for cards/panels sitting on --bg */
  --bg-graphite:      #18171C;   /* alt background, kept for reference */
  --bg-aubergine:     #200C24;   /* alt background, kept for reference */

  /* text */
  --ink:              #F5F1EA;
  --ink-muted:        #ACA7C0;
  --ink-faint:        rgba(245,241,234,.5);

  /* borders / dividers */
  --line:             rgba(245,241,234,.12);
  --line-strong:      rgba(245,241,234,.22);

  /* fonts */
  --font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --font-sans:    'Poppins', 'Helvetica Neue', sans-serif;
  --font-accent:  'Fraunces', 'Georgia', serif;

  /* signature gradient */
  --grad-main: linear-gradient(100deg, var(--chaos-pink) 0%, var(--chaos-orchid) 45%, var(--chaos-violet) 60%, var(--chaos-cyan) 100%);

  /* spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px;
}

/* --------------------------------------------------------------------------
   3. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img, svg{ max-width:100%; display:block; }
a{ color:var(--chaos-cyan); text-decoration:none; }
a:hover{ color:var(--chaos-pink); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  margin:0 0 var(--space-3);
  color:var(--ink);
}
h1{ font-size:clamp(40px,6vw,72px); font-weight:800; }
h2{ font-size:clamp(30px,4.4vw,46px); }
h3{ font-size:22px; font-weight:600; }
h4{ font-size:17px; font-weight:600; }

p{ margin:0 0 var(--space-3); color:var(--ink-muted); max-width:65ch; }
p.lead{ font-size:1.15em; color:var(--ink); }

blockquote{
  font-family:var(--font-accent); font-style:italic; font-weight:600;
  color:var(--chaos-pink); font-size:1.4em; line-height:1.4; margin:0;
}

::selection{ background:var(--chaos-gold); color:#241708; }

/* --------------------------------------------------------------------------
   4. TEXT UTILITIES
   -------------------------------------------------------------------------- */
.text-gradient{
  background:var(--grad-main);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{
  font-family:var(--font-sans); font-weight:600; font-size:.78em;
  letter-spacing:.22em; text-transform:uppercase; color:var(--chaos-gold);
  margin-bottom:var(--space-2); display:block;
}
.text-muted{ color:var(--ink-muted); }
.text-pink{ color:var(--chaos-pink); }
.text-cyan{ color:var(--chaos-cyan); }
.text-gold{ color:var(--chaos-gold); }
.font-accent{ font-family:var(--font-accent); font-style:italic; font-weight:600; }

/* --------------------------------------------------------------------------
   5. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.wrap{ max-width:1100px; margin:0 auto; padding:0 28px; }
.section{ padding:var(--space-7) 0; }
.card{
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:var(--space-4);
}
.divider{ height:1px; background:linear-gradient(90deg, var(--chaos-gold), transparent 70%); margin:var(--space-4) 0; border:none; }
.grid{ display:grid; gap:var(--space-3); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:820px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block; font-family:var(--font-sans); font-weight:700; font-size:13.5px;
  letter-spacing:.04em; padding:14px 28px; border-radius:var(--radius-pill);
  border:1px solid transparent; cursor:pointer; transition:.2s ease;
}
.btn-primary{ background:var(--chaos-gold); color:#241708; }
.btn-primary:hover{ background:#f0c85a; color:#241708; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:var(--chaos-cyan); color:var(--chaos-cyan); }

/* --------------------------------------------------------------------------
   7. TAGS / LABELS / SWATCHES
   -------------------------------------------------------------------------- */
.tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--chaos-gold); color:#241708;
}
.swatch{
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); background:var(--bg-raised);
}
.swatch .fill{ height:96px; }
.swatch .meta{ padding:14px 16px; }
.swatch .name{ font-weight:600; font-size:14px; color:var(--ink); }
.swatch .hex{ font-family:monospace; font-size:12.5px; color:var(--ink-muted); }

/* --------------------------------------------------------------------------
   8. NAV (optional, for one-pagers / sites)
   -------------------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(7,12,31,.75); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; gap:24px; padding:16px 28px; }
.nav .brand{ font-family:var(--font-display); font-weight:700; font-size:19px; margin-right:auto; }
.nav a{
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-muted);
}
.nav a:hover{ color:var(--chaos-cyan); }

/* --------------------------------------------------------------------------
   9. PRINT SUPPORT
   -------------------------------------------------------------------------- */
@media print{
  .nav{ display:none; }
  body{ background:var(--bg) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}