@font-face { font-family: PPNeue; src: url('/fonts/PPNeueMontreal-Variable.woff2') format('woff2'); font-display: swap; font-weight: 100 900; }

:root {
  --ink: #27242b;
  --night: #343038;
  --paper: #f8f6f2;
  --panel: #ebe7e5;
  --line: rgba(39, 36, 43, .16);
  --muted: #6e686f;
  --violet: #704a87;
  --radius: 28px;
}

body { background: var(--paper) !important; color: var(--ink) !important; font-family: PPNeue, Arial, sans-serif !important; }
.gradient-text { background: none !important; color: var(--ink) !important; -webkit-text-fill-color: currentColor !important; }
.container { max-width: 1180px !important; }

body > nav.sticky {
  position: sticky !important;
  top: 14px !important;
  z-index: 50;
  width: min(1180px, calc(100% - 32px));
  margin: 14px auto 0;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  border-radius: 30px !important;
  background: rgba(248, 246, 242, .92) !important;
  box-shadow: 0 12px 28px rgba(39, 36, 43, .08);
  backdrop-filter: blur(18px);
}
body > nav > div { max-width: none !important; padding: 8px 12px !important; }
body > nav img { width: 42px !important; height: 42px !important; border-radius: 50%; }
body > nav .font-bold.text-xl { color: var(--ink) !important; font-size: 22px !important; letter-spacing: -.04em; }
body > nav a { border-radius: 22px; }
body > nav .bg-violet-600 { background: var(--night) !important; color: #fff !important; }

.bg-violet-50 { background: transparent !important; }
.text-violet-600,
.text-violet-700 { color: var(--violet) !important; }
.bg-violet-600 { background: var(--night) !important; }
.bg-violet-100,
.bg-orange-100,
.from-violet-100,
.to-violet-200,
.from-purple-100 { background: var(--panel) !important; }
.border-violet-100 { border-color: var(--line) !important; }
.rounded-3xl { border-radius: var(--radius) !important; }
.rounded-xl { border-radius: 18px !important; }
.rounded-lg { border-radius: 12px !important; }

body > .bg-violet-50 { padding-top: 22px !important; padding-bottom: 12px !important; }
body > section:first-of-type { padding-top: 22px !important; padding-bottom: 34px !important; }
body > section:first-of-type .glass-card { overflow: hidden; padding: 0 !important; }
body > section:first-of-type .glass-card > div { display: grid !important; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr) !important; align-items: stretch !important; gap: 0 !important; }

.glass-card {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.w-32.h-32 {
  position: relative;
  width: 100% !important;
  height: auto !important;
  min-height: 310px;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: var(--night) !important;
  box-shadow: none !important;
}
.w-32.h-32::before { content: ''; position: absolute; width: 210px; height: 210px; border: 1px solid rgba(220, 209, 226, .28); border-radius: 50%; }
.w-32.h-32::after { content: ''; position: absolute; width: 132px; height: 132px; border: 1px solid rgba(220, 209, 226, .22); border-radius: 50%; }
.sign-monogram::before { position: relative; z-index: 1; color: #fff; font-size: 76px; font-weight: 360; letter-spacing: -.09em; }
.sign-monogram::after { content: '2026'; position: absolute; left: 24px; bottom: 22px; color: #c8bdcc; font-size: 11px; letter-spacing: .14em; }
[data-sign='aries'] .sign-monogram::before { content: 'AR'; }
[data-sign='taurus'] .sign-monogram::before { content: 'TA'; }
[data-sign='gemini'] .sign-monogram::before { content: 'GE'; }
[data-sign='cancer'] .sign-monogram::before { content: 'CA'; }
[data-sign='leo'] .sign-monogram::before { content: 'LE'; }
[data-sign='virgo'] .sign-monogram::before { content: 'VI'; }
[data-sign='libra'] .sign-monogram::before { content: 'LI'; }
[data-sign='scorpio'] .sign-monogram::before { content: 'SC'; }
[data-sign='sagittarius'] .sign-monogram::before { content: 'SA'; }
[data-sign='capricorn'] .sign-monogram::before { content: 'CP'; }
[data-sign='aquarius'] .sign-monogram::before { content: 'AQ'; }
[data-sign='pisces'] .sign-monogram::before { content: 'PI'; }

body > section:first-of-type .text-center.md\:text-left { padding: clamp(36px, 5vw, 62px) !important; text-align: left !important; }
body > section:first-of-type h1 { margin: 12px 0 16px !important; color: var(--ink) !important; font-size: clamp(54px, 6vw, 78px) !important; font-weight: 380 !important; line-height: .95 !important; letter-spacing: -.06em !important; }
body > section:first-of-type h1 > .text-gray-500 { display: none !important; }
body > section:first-of-type .flex.flex-wrap { justify-content: flex-start !important; gap: 8px !important; margin-top: 22px; }
body > section:first-of-type .flex.flex-wrap span { padding: 9px 15px !important; border-radius: 18px !important; background: var(--panel) !important; color: var(--muted) !important; }

body > section:not(:first-of-type) { padding-top: 34px !important; padding-bottom: 34px !important; }
body > section:not(:first-of-type) .glass-card { padding: clamp(28px, 4vw, 48px) !important; }
h2 { color: var(--ink) !important; font-weight: 520 !important; letter-spacing: -.035em !important; }
p { color: var(--muted); }
.month-card:hover { transform: translateY(-2px) !important; background: var(--night) !important; color: #fff !important; box-shadow: 0 14px 30px rgba(39,36,43,.12) !important; }
.month-card:hover * { color: #fff !important; }
footer { margin-top: 40px; background: var(--night) !important; }

@media (max-width: 760px) {
  body > nav.sticky { width: calc(100% - 20px); }
  body > section:first-of-type .glass-card > div { grid-template-columns: 1fr !important; }
  .w-32.h-32 { min-height: 240px; }
  body > section:first-of-type .text-center.md\:text-left { padding: 32px 22px !important; }
  body > section:first-of-type h1 { font-size: 54px !important; }
  body > nav .hidden.md\:flex { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}