/* Coccolicious — Cosmic Citrus design system, v2 (left-sidebar layout)
   Marigold #FFBF00 · Tangerine #FF6B35 · Lavender #E0B0FF
   Cream #FBF3E0 · Aubergine #2B1B3A
   Brand rules: no gradients, no starfields, no horizontal scrolling. */

:root {
  --cream: #FBF3E0;
  --cream-raised: #FFFAF0;
  --ink: #2B1B3A;
  --ink-soft: #55446B;
  --gold: #FFBF00;
  --gold-deep: #E5A800;
  --tangerine: #FF6B35;
  --lavender: #E0B0FF;
  --lavender-soft: #F0DCFF;
  --line: rgba(43, 27, 58, 0.22);
  --radius: 22px;
  --radius-pill: 999px;
  --shadow: 0 2px 0 rgba(43, 27, 58, 0.9);
  --sidebar-w: 264px;
  --font-display: "GlimmerGroove", "Fraunces", Georgia, serif;
  --font-serif: "Fraunces", Georgia, serif;
  --font-label: "Space Grotesk", "Helvetica Neue", sans-serif;
}

@font-face {
  font-family: "GlimmerGroove";
  src: url("/static/fonts/glimmergroove.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* Fraunces + Space Grotesk self-hosted (variable fonts, latin subset) —
   no visitor data leaks to Google Fonts (GDPR). */
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/spacegrotesk-latin-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;           /* vertical scrolling only, everywhere */
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1020px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ---------- type ---------- */

h1, h2, h3 { line-height: 1.05; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  letter-spacing: 0.01em;
}
.display .gold { color: var(--gold-deep); }

h2.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.4em;
}

.label {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tangerine);
}
.label.lav { color: var(--ink); background: var(--lavender);
  padding: 4px 12px; border-radius: var(--radius-pill); display: inline-block; }

.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 46ch; }

.sparkle { color: var(--gold-deep); }

.squiggle { display: block; margin: 10px 0 0; }
.squiggle path { stroke: var(--tangerine); stroke-width: 3.5;
  fill: none; stroke-linecap: round; }
.squiggle.lav path { stroke: var(--lavender); }

/* ---------- shell: fixed left sidebar + content ---------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--cream);
  border-right: 1.5px solid var(--tangerine);
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  z-index: 60;
}
.sidebar .logo-link { display: block; }
.sidebar .logo-img { width: 148px; height: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 8px 14px rgba(43, 27, 58, 0.16));
  mix-blend-mode: multiply; }

nav.side-nav { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; }
nav.side-nav a {
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 12px;
  white-space: nowrap;
}
nav.side-nav a:hover { background: var(--lavender-soft); color: var(--ink); }
nav.side-nav a.active { background: var(--lavender); }
nav.side-nav a .spark { color: var(--tangerine); margin-right: 6px; }

.sidebar .side-cta { margin-top: 26px; }
.sidebar .side-foot {
  margin-top: auto;
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  line-height: 1.7;
}
.sidebar .side-foot a { color: var(--ink-soft); }

/* mobile top bar */
.mobilebar { display: none; }

.content { margin-left: var(--sidebar-w); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 16px 34px;
  border: 2px solid var(--ink);
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold-deep);
  box-shadow: 0 4px 0 var(--gold-deep);
}
.btn-gold:hover { box-shadow: 0 6px 0 var(--gold-deep); }

.btn-outline { background: var(--cream-raised); color: var(--ink); box-shadow: var(--shadow); }
.btn-lav { background: var(--lavender); color: var(--ink); border-color: var(--ink);
  box-shadow: var(--shadow); }
.btn-small { padding: 10px 22px; font-size: 0.72rem; }
.btn-block { display: block; }

/* ---------- hero v2: sticker collage + orbit CTA ---------- */

.hero-v2 {
  position: relative;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 24px 70px;
  overflow: hidden;             /* stickers never cause scroll */
}
.hero-v2 .kicker, .hero-v2 .display, .hero-v2 .lede, .hero-v2 .journey-cta,
.hero-v2 .cta-hint {
  position: relative; z-index: 2;
}
.hero-v2 .kicker { margin-bottom: 16px; }
.hero-v2 .display { max-width: 17ch; margin: 0 auto; }
.hero-v2 .lede { margin: 22px auto 44px; }

.hero-sticker {
  position: absolute;
  pointer-events: none;
  user-select: none;
  animation: floaty 7s ease-in-out infinite;
}
.hero-sticker img { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 18px rgba(43, 27, 58, 0.14)); }

.st-moon  { width: clamp(96px, 11vw, 165px);  top: 3%;  left: 2%;  animation-delay: 0s;   transform: rotate(-8deg); }
.st-sun   { width: clamp(96px, 11vw, 170px);  top: 3%;  right: 2.5%; animation-delay: -2.4s; transform: rotate(7deg); }
.st-const { width: clamp(100px, 12vw, 175px); bottom: 6%; left: 4%; animation-delay: -4.2s; transform: rotate(5deg); }
.st-eye   { width: clamp(105px, 13vw, 190px); bottom: 8%; right: 4%; animation-delay: -1.2s; transform: rotate(-6deg); }
.st-card1 { width: clamp(90px, 9vw, 135px); top: 42%; left: 1.5%; animation-delay: -3s;  transform: rotate(-11deg); }
.st-card2 { width: clamp(90px, 9vw, 135px); top: 40%; right: 2%;  animation-delay: -5.5s; transform: rotate(10deg); }

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

/* the sticker-style "Start your journey" CTA */
.journey-cta {
  display: block;
  width: min(560px, 88vw);
  transition: transform 0.15s ease;
}
.journey-cta img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(43, 27, 58, 0.18));
}
.journey-cta:hover { transform: scale(1.03) rotate(-1deg); }
.journey-cta:active { transform: scale(0.99); }
.cta-hint {
  margin-top: 20px;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .hero-sticker { animation: none; }
}

/* ---------- cards & sections ---------- */

section { padding: 56px 0; }

.card {
  background: var(--cream-raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
}
.card.lav { background: var(--lavender-soft); border-color: var(--lavender); }
.card.ink { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.card.ink .label { color: var(--gold); }
/* warm CTA card — brand rule: no large dark-ink color fields on the site */
.card.citrus { background: var(--tangerine); color: var(--ink); border-color: var(--ink);
  box-shadow: 0 10px 26px rgba(43, 27, 58, 0.14); }
.card.citrus .label { color: var(--cream-raised); }
.card.citrus .section-title { color: var(--ink); }
.card.citrus p { color: var(--ink); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.feature h3 { font-weight: 700; font-size: 1.35rem; margin: 14px 0 10px; }
.feature p { color: var(--ink-soft); font-size: 1rem; }
.card.ink .feature p, .card.ink p { color: rgba(251, 243, 224, 0.85); }
.feature .glyph { font-size: 1.6rem; color: var(--gold-deep); }

/* ---------- testimonials ---------- */

.testimonial blockquote { font-size: 1.12rem; font-weight: 500; line-height: 1.5; }
.testimonial blockquote::before { content: "“"; color: var(--tangerine);
  font-size: 2.2rem; font-weight: 900; display: block; line-height: 0.6;
  margin-bottom: 12px; }
.testimonial .who {
  margin-top: 18px; font-family: var(--font-label);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.testimonial .who strong { color: var(--ink); }

/* ---------- forms ---------- */

form.reading-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
form.reading-form .full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-family: var(--font-label); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 8px; color: var(--ink);
}
.field label .opt { color: var(--ink-soft); letter-spacing: 0.1em; }
.field input {
  width: 100%;
  font-family: var(--font-label); font-size: 1rem;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
}
.field input:focus { outline: 2.5px solid var(--gold); border-color: var(--gold-deep); }

/* birth-detail selects — same cream skin as inputs, custom arrow */
.field select {
  width: 100%;
  font-family: var(--font-label); font-size: 1rem;
  padding: 14px 40px 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background-color: var(--cream);
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232B1B3A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.field select:focus { outline: 2.5px solid var(--gold); border-color: var(--gold-deep); }
.date-parts { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 8px; }
.time-parts { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }

/* birth-place autocomplete */
.place-wrap { position: relative; }
.place-suggest {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(43, 27, 58, 0.14);
}
.place-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-label); font-size: 0.95rem;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  cursor: pointer;
}
.place-option:last-child { border-bottom: none; }
.place-option:hover, .place-option:focus { background: var(--lavender-soft); }

.form-hint { font-size: 0.88rem; color: var(--ink-soft); }
.form-error {
  grid-column: 1 / -1;
  background: #FFE8DE; border: 1.5px solid var(--tangerine);
  border-radius: 14px; padding: 14px 18px; font-size: 0.95rem;
}

/* ---------- reading result ---------- */

.big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.big3 .card { text-align: center; padding: 28px 20px; }
.big3 .card .label { display: block; margin-bottom: 12px; }
.big3 .placement { font-weight: 700; font-size: 1.4rem; }
.prose p + p { margin-top: 1em; }

.keydate {
  display: flex; gap: 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px dashed var(--line);
}
.keydate:last-child { border-bottom: none; }
.keydate .when {
  font-family: var(--font-label); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.1em; color: var(--tangerine); white-space: nowrap;
}

/* ---------- locked (freebie upsell teaser) ---------- */
.locked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.locked {
  position: relative; overflow: hidden;
  background: #FFFAF0; border: 1.5px solid var(--line);
  border-radius: 20px; padding: 24px 26px;
}
.locked .lockchip { position: absolute; top: 16px; right: 18px; font-size: 1.05rem; opacity: 0.75; }
.locked .blur {
  filter: blur(5px); user-select: none; pointer-events: none;
  color: var(--ink-soft); line-height: 1.6; margin-top: 10px;
}
@media (max-width: 620px) { .locked-grid { grid-template-columns: 1fr; } }

/* ---------- blog ---------- */

.post-card { display: block; text-decoration: none; color: inherit; }
.post-card:hover { border-color: var(--gold-deep); }
.post-card h3 { font-weight: 700; font-size: 1.45rem; margin: 12px 0; }
.post-card .date { font-family: var(--font-label); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.post-card p { color: var(--ink-soft); }

article.post { max-width: 680px; margin: 0 auto; }
article.post h1 { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem); margin: 18px 0 26px; }
article.post .prose h2 { font-size: 1.5rem; font-weight: 700; margin: 1.6em 0 0.5em; }
article.post .prose p { margin: 1em 0; }
article.post .prose em { color: var(--ink-soft); }

/* ---------- me page ---------- */

.me-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 44px;
  align-items: start; }
.me-roles {
  font-family: var(--font-label); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  margin: 18px 0 26px;
}
.me-roles .dot { color: var(--tangerine); }
.me-stack { position: relative; min-height: 460px; }
.me-stack img { position: absolute; filter: drop-shadow(0 10px 18px rgba(43,27,58,0.14)); }
.me-stack .a { width: 74%; top: 0; right: 4%; transform: rotate(4deg); }
.me-stack .b { width: 56%; bottom: 4%; left: 0; transform: rotate(-7deg); }
.me-stack .c { width: 34%; bottom: 0; right: 0; transform: rotate(9deg); }

/* ---------- account ---------- */

.forecast-row {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 0; border-bottom: 1px dashed var(--line);
}
.forecast-row:last-child { border-bottom: none; }
.forecast-row .period { font-weight: 700; font-size: 1.15rem; flex: 1; }

/* ---------- admin ---------- */

.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-tabs a {
  font-family: var(--font-label); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding: 10px 18px; border: 1.5px solid var(--line);
  border-radius: var(--radius-pill); background: var(--cream-raised);
}
.admin-tabs a:hover { background: var(--lavender-soft); }
.admin-tabs a.active { background: var(--lavender); border-color: var(--ink); }

.card.stat { text-align: center; padding: 28px 20px; }
.stat-num { font-family: var(--font-display); font-size: 3rem; line-height: 1.1;
  margin-top: 10px; }
.stat-sub { font-family: var(--font-label); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  margin-top: 6px; }
.card.ink .stat-sub { color: rgba(251, 243, 224, 0.7); }

.admin-search { display: flex; gap: 12px; margin-top: 22px; align-items: center;
  flex-wrap: wrap; }
.admin-search input {
  flex: 1; min-width: 220px;
  font-family: var(--font-label); font-size: 1rem;
  padding: 13px 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-pill); background: var(--cream-raised);
  color: var(--ink);
}
.admin-search input:focus { outline: 2.5px solid var(--gold);
  border-color: var(--gold-deep); }

/* Wide tables scroll inside the card — never the page. */
.admin-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  font-family: var(--font-label); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
  text-align: left; padding: 16px 14px 10px 0; border-bottom: 1.5px solid var(--line);
}
.admin-table td { padding: 14px 14px 14px 0;
  border-bottom: 1px dashed var(--line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-date { font-family: var(--font-label); font-size: 0.78rem;
  letter-spacing: 0.06em; color: var(--ink-soft); white-space: nowrap; }

.status-pill {
  display: inline-block;
  font-family: var(--font-label); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink);
}
.status-pill.active { background: var(--gold); }
.status-pill.paused { background: var(--lavender); }
.status-pill.cancelled { background: var(--cream); color: var(--ink-soft);
  border-color: var(--line); }

.admin-flash {
  margin-top: 20px;
  background: var(--lavender-soft); border: 1.5px solid var(--lavender);
  border-radius: 14px; padding: 14px 18px;
  font-family: var(--font-label); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em;
}

.card.danger { border-color: var(--tangerine); }
.btn-danger { color: var(--tangerine); border-color: var(--tangerine);
  box-shadow: 0 2px 0 var(--tangerine); }
.btn-danger:hover { background: #FFE8DE; }

.delete-disclosure summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-label); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  white-space: nowrap;
}
.delete-disclosure summary::-webkit-details-marker { display: none; }
.delete-disclosure summary:hover { color: var(--tangerine); }
.delete-disclosure[open] summary { color: var(--tangerine); }
.delete-disclosure form { display: flex; gap: 8px; margin-top: 8px;
  align-items: center; }
.delete-disclosure input {
  font-family: var(--font-label); font-size: 0.85rem;
  padding: 9px 12px; border: 1.5px solid var(--line);
  border-radius: var(--radius-pill); background: var(--cream);
  color: var(--ink); width: 180px;
}
.delete-disclosure input:focus { outline: 2px solid var(--tangerine); }

/* ---------- footer ---------- */

footer.site {
  margin-top: 60px;
  background: var(--lavender-soft);
  color: var(--ink);
  padding: 46px 0 38px;
}
footer.site .cols { display: flex; gap: 40px; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-start; }
footer.site a { color: var(--ink); text-decoration: none; }
footer.site a:hover { color: var(--tangerine); }
footer.site .fine {
  margin-top: 30px; font-family: var(--font-label);
  font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .sidebar { display: none; }
  .content { margin-left: 0; }

  .mobilebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1.5px solid var(--line);
    background: var(--cream);
    position: sticky;
    top: 0;
    z-index: 60;
  }
  .mobilebar .logo-img { height: 48px; width: auto;
    filter: drop-shadow(0 4px 8px rgba(43, 27, 58, 0.16)); }
  .mobilebar details { position: relative; }
  .mobilebar summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 10px 16px;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    background: var(--gold);
  }
  .mobilebar summary::-webkit-details-marker { display: none; }
  .mobilebar details[open] .sheet {
    position: absolute; right: 0; top: calc(100% + 10px);
    background: var(--cream-raised);
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: 12px;
    min-width: 220px;
    display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 14px 34px rgba(43, 27, 58, 0.16);
  }
  .mobilebar .sheet a {
    font-family: var(--font-label); font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    padding: 11px 12px; border-radius: 10px;
  }
  .mobilebar .sheet a:hover { background: var(--lavender-soft); }

  .hero-v2 { min-height: 74vh; padding-top: 60px; }
  .st-card1, .st-card2 { display: none; }
  .cta-hint { font-size: 0.92rem; }

  .grid-3, .big3, .grid-2, .me-grid { grid-template-columns: 1fr; }
  form.reading-form { grid-template-columns: 1fr; }
  section { padding: 40px 0; }
  .me-stack { width: 100%; max-width: 340px; margin: 8px auto 0;
    min-height: 300px; }
}