/*
  ============================================================
  ASTRACANA · DAILY HOROSCOPES — STYLES
  Full-page section (hub + daily). Warm ivory surfaces,
  midnight-blue ink, antique-gold details. Type inherits the
  theme (DM Serif Display headings / Inter body via fallbacks).
  No emoji, no animations beyond a subtle card hover, and
  nothing moves under prefers-reduced-motion.
  ============================================================
*/
.horo-wrap{
  --horo-ink:#262038; --horo-ink-soft:#5b5470;
  --horo-midnight:#1B1235; --horo-gold:#9a7f2a; --horo-gold-soft:#e9dcbc;
  --horo-line:#e5ddcb; --horo-card:#fffdf6;
  max-width:1080px; margin:0 auto; padding:2.4rem 20px 3.2rem;
  color:var(--horo-ink); line-height:1.65;
}
.horo-wrap *{ box-sizing:border-box; }
.horo-wrap h1, .horo-wrap h2, .horo-wrap h3{
  font-family:"DM Serif Display", Georgia, "Times New Roman", serif;
  font-weight:400; color:var(--horo-midnight); line-height:1.2;
}
.horo-wrap a{ color:var(--horo-midnight); text-decoration-color:var(--horo-gold); text-underline-offset:3px; }
.horo-wrap a:hover{ color:var(--horo-gold); }

.horo-hero{ text-align:center; margin-bottom:2rem; }
.horo-kicker{
  font-size:.78rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--horo-gold); font-weight:600; margin:0 0 .6rem;
}
.horo-hero h1{ font-size:clamp(2rem,6vw,3.2rem); margin:0 0 .4rem; }
.horo-date{ font-size:1.05rem; color:var(--horo-ink-soft); margin:0 0 .8rem; }
.horo-lede{ max-width:62ch; margin:0 auto; color:var(--horo-ink-soft); }
.horo-signmeta{ color:var(--horo-ink-soft); margin:.2rem 0 .6rem; }
.horo-profile-link{ margin:0; }

/* Sign glyph: styled text glyph, never an emoji image. */
.horo-glyph{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--horo-gold-soft); background:#fbf6e9;
  color:var(--horo-gold); font-size:1.5rem; line-height:1;
}
.horo-glyph-lg{ width:72px; height:72px; font-size:2.1rem; margin-bottom:.8rem; }

/* Card grids: 1 column mobile, 2 tablet, 3 desktop (hub), 4 for mini grid. */
.horo-grid{
  display:grid; gap:16px; grid-template-columns:1fr;
  margin:1.6rem 0 2.4rem;
}
@media (min-width:620px){ .horo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:920px){ .horo-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:920px){ .horo-grid-sm{ grid-template-columns:repeat(4,1fr); } }

.horo-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:var(--horo-card); border:1px solid var(--horo-line);
  border-radius:16px; padding:20px; text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
.horo-card:hover{ border-color:var(--horo-gold); transform:translateY(-2px); }
.horo-card .horo-glyph{ margin-bottom:8px; }
.horo-card-name{
  font-family:"DM Serif Display", Georgia, serif; font-size:1.35rem;
  color:var(--horo-midnight);
}
.horo-card-dates{ color:var(--horo-ink-soft); font-size:.92rem; }
.horo-card-meta{ color:var(--horo-ink-soft); font-size:.85rem; }
.horo-card-link{ margin-top:10px; color:var(--horo-gold); font-weight:600; font-size:.92rem; }
.horo-card.is-current{ border-color:var(--horo-gold); background:#fdf8ec; }

/* Moon strip + overview */
.horo-moonstrip{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  text-align:center; background:var(--horo-midnight); color:#f4ead2;
  border-radius:999px; padding:.65rem 1.2rem; margin:0 auto 2rem; max-width:720px;
}
.horo-moon-icon{ flex:none; fill:#e9c766; }
.horo-moonstrip p{ margin:0; }
.horo-moonstrip strong{ color:#e9c766; }

.horo-overview{ max-width:68ch; margin:0 auto 2.2rem; }
.horo-overview h2{ font-size:1.6rem; margin:0 0 .6rem; }
.horo-focus{
  border-left:3px solid var(--horo-gold); padding-left:14px;
  font-style:italic; color:var(--horo-ink-soft);
}

/* Domain cards */
.horo-domains{
  display:grid; gap:16px; grid-template-columns:1fr; margin-bottom:2rem;
}
@media (min-width:760px){ .horo-domains{ grid-template-columns:repeat(2,1fr); } }
.horo-domain{
  background:var(--horo-card); border:1px solid var(--horo-line);
  border-radius:16px; padding:22px 24px;
}
.horo-domain header{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin-bottom:.4rem;
}
.horo-domain h3{ font-size:1.25rem; margin:0; }
.horo-domain-sky{
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--horo-gold); font-weight:600; margin:0 0 .6rem;
}
.horo-domain p{ margin:0 0 .6rem; }
.horo-edge{ font-size:.88rem; font-style:italic; color:var(--horo-ink-soft); }

/* Score dots: pure CSS circles (5 max). */
.horo-dots{ display:inline-flex; gap:5px; }
.horo-dot{
  width:9px; height:9px; border-radius:50%;
  border:1px solid var(--horo-gold); background:transparent;
}
.horo-dot.is-on{ background:var(--horo-gold); }

/* Lucky pair */
.horo-lucky{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-bottom:2.2rem;
}
.horo-lucky-item{
  background:#fbf6e9; border:1px solid var(--horo-gold-soft);
  border-radius:14px; padding:14px 26px; text-align:center; min-width:180px;
}
.horo-lucky-label{
  display:block; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--horo-ink-soft);
}
.horo-lucky-val{
  font-family:"DM Serif Display", Georgia, serif; font-size:1.5rem; color:var(--horo-midnight);
}

/* Day navigation */
.horo-daynav{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--horo-line); border-bottom:1px solid var(--horo-line);
  padding:14px 4px; margin-bottom:2.4rem; font-weight:600;
}
.horo-daynav a{ text-decoration:none; }
.horo-daynav a:hover{ text-decoration:underline; }

/* Explainer / disclaimer */
.horo-note{
  max-width:68ch; margin:0 auto; background:#fbf6e9;
  border:1px solid var(--horo-gold-soft); border-radius:16px; padding:22px 26px;
}
.horo-note h2{ font-size:1.3rem; margin:0 0 .5rem; }
.horo-note p{ margin:0; color:var(--horo-ink-soft); }
.horo-others h2{ font-size:1.5rem; margin:0 0 .4rem; }

/* Reduced motion: kill the only transition/hover motion. */
@media (prefers-reduced-motion: reduce){
  .horo-card{ transition:none; }
  .horo-card:hover{ transform:none; }
}