/* Simone Gaines — single-page site
   Blue + pop-pink, on Mercy Bell typographic bones */

:root {
  /* core palette */
  --ink: #07172E;          /* near-black navy */
  --navy: #0B2A4A;         /* deep blue */
  --blue: #1E5BB8;         /* primary vibrant blue */
  --blue-bright: #2E6FE0;  /* link/hover blue */
  --sky: #9CC8F2;          /* tinted relief */
  --paper: #F2EFE6;        /* warm off-white */
  --paper-cool: #EAF1F8;   /* cool relief */
  --pop: #FF2D87;          /* catalyst hot pink */
  --pop-deep: #C81E68;

  --rule: rgba(7, 23, 46, 0.18);
  --rule-on-dark: rgba(255, 255, 255, 0.22);

  /* type */
  --font-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* scale */
  --fs-mega: clamp(64px, 13vw, 220px);
  --fs-display: clamp(48px, 8vw, 120px);
  --fs-h1: clamp(40px, 6vw, 88px);
  --fs-h2: clamp(28px, 3.6vw, 52px);
  --fs-h3: clamp(20px, 2vw, 28px);
  --fs-body-l: clamp(18px, 1.6vw, 22px);
  --fs-body: 16px;
  --fs-mono: 12px;
  --fs-mono-l: 14px;
}

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

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--pop); color: white; }

a { color: inherit; }

button { font: inherit; cursor: pointer; }

/* — type primitives — */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: lowercase;
  letter-spacing: -0.03em;
  line-height: 0.88;
  margin: 0;
}
.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-mono);
  font-weight: 500;
}
.mono-l {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-mono-l);
  font-weight: 600;
}

/* — layout primitives — */
.section {
  padding: clamp(80px, 10vw, 160px) clamp(24px, 5vw, 80px);
  position: relative;
}
.section-inner { max-width: 1400px; margin: 0 auto; }

.section--paper { background: var(--paper); color: var(--ink); }
.section--paper-cool { background: var(--paper-cool); color: var(--ink); }
.section--navy { background: var(--navy); color: var(--paper); }
.section--blue { background: var(--blue); color: var(--paper); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--pop { background: var(--pop); color: var(--ink); }

/* — top rail (nav) — */
.rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px clamp(24px, 5vw, 80px);
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  transition: background 150ms, color 150ms, border-color 150ms;
}
.rail__brand {
  font-family: var(--font-display);
  font-size: 18px;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}
.rail__brand .dot { color: var(--pop); }
.rail__nav { display: flex; gap: 28px; }
.rail__nav a {
  text-decoration: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 600;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 150ms, color 150ms;
}
.rail__nav a:hover { border-color: var(--pop); }
.rail__nav a.is-active { border-color: var(--pop); color: var(--pop-deep); }

@media (max-width: 720px) {
  .rail__nav { display: none; }
}

/* — buttons — */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.btn:hover { background: var(--pop); color: var(--ink); border-color: var(--pop); }
.btn--pop { background: var(--pop); color: var(--ink); border-color: var(--ink); }
.btn--pop:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: var(--pop); color: var(--ink); border-color: var(--ink); }

/* — kicker block — */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker__dot {
  width: 10px; height: 10px;
  background: var(--pop);
  display: inline-block;
}

/* — eye + stars — */
.svg-mark { color: currentColor; display: block; }

/* highlight tools */
.hl-underline {
  display: inline;
  background-image: linear-gradient(transparent 70%, var(--pop) 70%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.05em;
}
.hl-block {
  background: var(--pop);
  color: var(--ink);
  padding: 0 0.12em;
}
.hl-pop { color: var(--pop); }

/* — hr rule — */
.rule { height: 2px; background: currentColor; opacity: 1; border: 0; margin: 0; }
.rule-soft { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule-on-dark { height: 2px; background: var(--paper); border: 0; opacity: 0.92; }

/* — scrim background numbers / decorative —*/
.bg-numeral {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  color: currentColor;
  opacity: 0.07;
  font-size: clamp(220px, 36vw, 560px);
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}