/* ═══════════════════════════════════════════════════════════════════════
   AskMaxie - component layer (deferred load)          rewritten 22 Aug 2026
   ═══════════════════════════════════════════════════════════════════════

   THE CONTRACT - read this before adding a rule.

   The page loads three stylesheets, in this order:

     1. /critical.css        design tokens + a handful of base rules
     2. inline <style>       in templates/base.html - OWNS THE LAYOUT:
                             header, nav, typography, main width, cards,
                             card-grid, link-grid, ephemeris, calculators,
                             ad slots, footer, newsletter
     3. /styles.css          this file, loaded deferred via
                             media="print" onload="this.media='all'"

   Because this file arrives LAST and deferred, any selector it shares with
   the inline block wins on equal specificity - but only AFTER first paint.
   That is how the site broke: the previous version of this file was a
   LIGHT-THEME design system (white cards, cool greys, its own 1200px
   container and 64px header) that redefined 29 of the inline block's
   selectors. Every page painted correctly in Lamplight, then visibly
   re-laid-out a moment later into the other design.

   Worse, it carried an @media (prefers-color-scheme: dark) block that
   repointed --bg-primary at --grey-900. The Lamplight retheme had
   redefined --grey-900 to cream (#F5EFE6), because on a dark ground that
   token is used as TEXT. So on any dark-OS device - most phones - the
   page ground, the cards and the form fields all turned cream, and
   .calc input rendered cream text on a cream field.

   THREE RULES, therefore:

     A. Never style a selector the inline block already owns. The list is
        below under "OWNED BY THE INLINE BLOCK". If you need to change one,
        change it in templates/base.html.
     B. No @media (prefers-color-scheme: *). Lamplight is unconditionally
        dark; there is no light theme to switch away from, and a token
        remap here cannot see how the ground was defined there.
     C. Style against tokens, never raw hex, so a future retheme is one
        block in critical.css.

   OWNED BY THE INLINE BLOCK - do not redefine here:
     :root  html  body  main  a  p  h1  h2  h3
     .site-header  .brand  .brand-mark  .wrap
     .nav-links  .nav-links a  .nav-links.open  .nav-toggle  .nav-toggle span
     .card  .card:hover  .card h3  .card p  .card-grid
     .link-grid  .link-grid a  .divider  .ephemeris  .lead
     .calc  .calc input  .calc label  .calc button (+ :hover/:active)
     .ad-slot (geometry)  .site-footer  .footer-mark  .footer-tagline
     .footer-links  .newsletter-*  .nc-*

   What is left for this file: components the inline block does NOT define,
   plus additive properties that cannot conflict (a font-family on headings
   whose size and colour the inline block sets).
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   HEADINGS - additive only
   The inline block sets size, weight, colour and margin. This adds the
   display face on top; it sets no geometry, so nothing can shift.
   Georgia rather than a webfont: the CSP in site/_headers does not admit
   fonts.googleapis.com, and self-hosting a display face for headings
   alone costs ~30KB on a site whose traffic is mostly one-page organic.
   ═══════════════════════════════════════════ */

h1, h2, h3,
.section-title,
.numeral,
.wordmark {
  font-family: var(--font-serif);
}


/* ═══════════════════════════════════════════
   PAGE HERO ART
   ═══════════════════════════════════════════ */

.hero-image,
.page-hero {
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  border-radius: var(--r-lg);
  margin-bottom: var(--s8);
}


/* ═══════════════════════════════════════════
   SECTION HEADINGS
   ═══════════════════════════════════════════ */

.section-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: var(--s16) 0 var(--s6);
  color: var(--ink);
  line-height: 1.15;
  text-wrap: balance;
}

.section-subtitle {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin-bottom: var(--s10);
  max-width: 62ch;
}


/* ═══════════════════════════════════════════
   FEATURE CARD
   A brass hairline on the left edge, not a full gradient border. The
   inline .card already carries the glass surface and radius; this only
   marks one out.
   ═══════════════════════════════════════════ */

.card-featured {
  position: relative;
  overflow: hidden;
}

.card-featured::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--g-gold);
  pointer-events: none;
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--brass-wash);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s4);
  color: var(--brass);
  font-size: 22px;
}


/* ═══════════════════════════════════════════
   ZODIAC GRID
   Not defined in the inline block, so this file owns it outright.
   ═══════════════════════════════════════════ */

.zodiac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s4);
  margin: var(--s8) 0;
}

.zodiac-card {
  text-align: center;
  padding: var(--s6) var(--s4);
  background: rgba(245, 239, 230, .06);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s var(--ease),
              border-color .25s var(--ease),
              background .25s var(--ease);
}

.zodiac-card:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 164, 65, .38);
  background: rgba(245, 239, 230, .10);
}

.zodiac-card img {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s3);
  display: block;
}

.zodiac-card span {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}


/* ═══════════════════════════════════════════
   CALCULATOR OUTPUT + the controls the inline block omits
   .calc, .calc input, .calc label and .calc button are the inline
   block's. Only select/textarea and the output panel belong here.
   ═══════════════════════════════════════════ */

.calc select,
.calc textarea {
  width: 100%;
  max-width: 320px;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 17px;
  background: var(--ground-deep);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  -webkit-appearance: none;
  appearance: none;
}

.calc select:focus,
.calc textarea:focus {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-color: var(--brass);
}

.calc-output {
  margin-top: var(--s6);
  padding: var(--s6);
  background: var(--ground-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  color: var(--ink);
  display: none;
}

.nc-system-hint {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.calc-output.visible { display: block; }
.calc-output p { margin-bottom: var(--s3); color: var(--ink-soft); }
.calc-output p:last-child { margin-bottom: 0; }


/* ═══════════════════════════════════════════
   EPHEMERIS - the inline block styles the bar; this spaces its items.
   ═══════════════════════════════════════════ */

.ephemeris span {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}


/* ═══════════════════════════════════════════
   AD SLOTS - colour only.
   `.ad-slot` is a flex container and an empty <ins> collapses to zero
   width inside it, which makes AdSense throw
   "No slot size for availableWidth=0". The width/flex rule in
   templates/base.html is load-bearing. Never set geometry here.
   ═══════════════════════════════════════════ */

/* Nothing here paints the slot. An unfilled <ins> would otherwise render as
   a large empty bordered box at the top of every page - and during AdSense
   review every slot on the site is unfilled. The fill-aware rule lives in
   the art-direction layer of templates/base.html, which paints the slot only
   when AdSense reports data-ad-status="filled". This file loads LAST, so a
   background declared here would override it. */

.ad-slot-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: var(--s2);
}


/* ═══════════════════════════════════════════
   READING PROSE
   The one place measure and rhythm actually matter - these are the
   horoscope and birth-chart readings people came to read.
   ═══════════════════════════════════════════ */

.reading p,
.horo-reading p {
  max-width: 66ch;
  line-height: 1.75;
  color: var(--ink-soft);
  font-size: 18px;
}


/* ═══════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════ */

.text-gradient {
  background: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-center    { text-align: center; }
.text-secondary { color: var(--ink-muted); }
.mt-0           { margin-top: 0; }
.mb-0           { margin-bottom: 0; }
.narrow         { max-width: var(--max-w-narrow); margin-left: auto; margin-right: auto; }


/* ═══════════════════════════════════════════
   LAZY-LOADED IMAGES
   ═══════════════════════════════════════════ */

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

img[loading="lazy"][src] { opacity: 1; }


/* ═══════════════════════════════════════════
   ENTRANCE ANIMATION
   ═══════════════════════════════════════════ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.animate-in       { animation: fadeInUp .6s var(--ease) both; }
.animate-delay-1  { animation-delay: .1s; }
.animate-delay-2  { animation-delay: .2s; }
.animate-delay-3  { animation-delay: .3s; }


/* ═══════════════════════════════════════════
   RESPONSIVE
   Only for selectors this file owns. The inline block carries its own
   breakpoints (900px for the nav, and its own mobile card rules) - adding
   competing ones here is what produced the mid-load reflow.
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
  .zodiac-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-image,
  .page-hero   { max-height: 240px; }
}

@media (max-width: 480px) {
  .zodiac-grid { grid-template-columns: repeat(2, 1fr); }
  .calc select,
  .calc textarea { max-width: 100%; }
  .reading p,
  .horo-reading p { font-size: 17px; }
}