/* ================================================================
   ANIMAL PAGE — VISUAL ELEVATION (Pass 1)
   Load AFTER:
     /static/css/animal-page-enhanced.css
     /static/css/animal-page-funnel.css

   Pass 1 scope (typography + color discipline):
     1. Display typography — Cormorant Garamond for major headings
     2. Element color system — Wood/Fire/Earth/Metal/Water tokens
        applied to trait chips, pills, fortune icons, element nav
     3. Gold-as-scarce — gold accent reserved for key data points
        and active states; everywhere else uses element colors or
        neutral text colors
     4. Eyebrow label discipline — consistent tracking-wide uppercase
        treatment for section labels

   This file is additive. Removing the <link> reverts the page.
   It does not touch the funnel additions (hero CTA, exit ramps);
   those have their own treatment that already follows the system.

   Future passes (NOT in this file):
     Pass 2: Earthly Branch panel expansion
     Pass 3: Emoji → custom iconography
     Pass 4: Section weight hierarchy
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   ROOT TOKENS
   These define the system. Reuse the same names as four-pillars
   elevation so the two pages share one design language.
   ════════════════════════════════════════════════════════════════ */

:root {
    /* ── Element palette ──
       Same five element colors used on the four-pillars page so the
       two pages share a coherent visual identity across the site. */
    --el-wood:        #6FBF7F;
    --el-wood-tint:   rgba(111, 191, 127, 0.10);
    --el-wood-border: rgba(111, 191, 127, 0.30);

    --el-fire:        #D26B5C;
    --el-fire-tint:   rgba(210, 107, 92, 0.10);
    --el-fire-border: rgba(210, 107, 92, 0.32);

    --el-earth:       #CBA86A;
    --el-earth-tint:  rgba(203, 168, 106, 0.10);
    --el-earth-border:rgba(203, 168, 106, 0.32);

    --el-metal:       #B6C6D4;
    --el-metal-tint:  rgba(182, 198, 212, 0.10);
    --el-metal-border:rgba(182, 198, 212, 0.30);

    --el-water:       #6A8FC8;
    --el-water-tint:  rgba(106, 143, 200, 0.10);
    --el-water-border:rgba(106, 143, 200, 0.32);

    /* ── Brand accent ── */
    --ap-accent:        #E8C547;
    --ap-accent-soft:   rgba(232, 197, 71, 0.14);
    --ap-accent-border: rgba(232, 197, 71, 0.32);

    /* ── Display typography ──
       Three font roles, strictly enforced:
         display = English headings (Cormorant Garamond, refined serif)
         body    = inherited body sans (unchanged)
         han     = Chinese characters (Noto Serif SC, unchanged)
    */
    --ap-font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino', 'Palatino Linotype', Georgia, serif;
    --ap-font-han:     'Noto Serif SC', 'Songti SC', 'PingFang SC', serif;
}


/* Optional Google Fonts load. Delete this @import if you'd prefer
   to host the font locally or skip the external request entirely;
   the fallback chain remains readable without it. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap');


/* ════════════════════════════════════════════════════════════════
   1. DISPLAY TYPOGRAPHY
   Major headings get the serif display family. The hierarchy:
     h1/hero-name = display, big
     h2 section title = display, medium
     h3 card title = display, small
     eyebrow labels = sans, uppercase, tracking-wide (unchanged here)
   ════════════════════════════════════════════════════════════════ */

/* Hero name ("Dog") — the single biggest typographic moment on the
   page. Slightly larger than before, refined serif weight. */
.ap-hero-name,
.ap-hero h1 {
    font-family: var(--ap-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.0;
}

/* Hero tagline ("The Loyal Protector") — italic serif under a serif
   headline reads as literary, not as UI label. */
.ap-hero-tagline {
    font-family: var(--ap-font-display);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* All major section H2s get the display treatment. The page has many
   h2s ("The Dog Personality Map", "Dog Strengths & Weaknesses",
   "The Dog in Love", "The Dog at Work", etc.) — they all become
   the same typographic family. */
.ap-section h2,
section.ap-section > h2 {
    font-family: var(--ap-font-display);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.15;
}

/* Card titles (h3 inside content cards) — smaller display serif,
   subordinate to section titles but still part of the family. */
.ap-content-card h3,
.ap-myth-card h3,
.ap-variant-card h3,
.ap-section h3 {
    font-family: var(--ap-font-display);
    font-weight: 600;
    letter-spacing: 0;
}

/* Eyebrow labels — keep the existing sans treatment but harden
   the tracking and uppercase discipline so they read as the same
   visual element wherever they appear. */
.ap-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ap-accent);
    opacity: 0.85;
}

/* Radar/personality map title — was its own thing; bring it into
   the eyebrow family for consistency. */
.ap-radar-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 224, 212, 0.55);
}


/* ════════════════════════════════════════════════════════════════
   2. ELEMENT COLOR SYSTEM
   Apply the five-element palette to every visual element that
   represents element identity:
     - Element type pills in the Dog Element Types selector
     - Element variant cards (Wood Dog, Fire Dog, etc.)
     - Trait chips colored by element
     - Year tiles colored by their year's element

   The renderer already adds element data to many of these via
   class names or inline attributes. We hook into both patterns.
   ════════════════════════════════════════════════════════════════ */

/* ── Element type selector pills (top of page, "Wood | Fire | Earth | Metal | Water") ──
   Each pill should carry its element's color so the selector
   reads as the elemental gradient it represents.

   The renderer uses .ap-element-chip with a data attribute or
   modifier class. We target the most likely patterns. */

.ap-element-chip[data-element="Wood"],
.ap-element-chip--wood {
    background: var(--el-wood-tint);
    border-color: var(--el-wood-border);
}
.ap-element-chip[data-element="Wood"] .ap-element-chip-name,
.ap-element-chip--wood .ap-element-chip-name { color: var(--el-wood); }

.ap-element-chip[data-element="Fire"],
.ap-element-chip--fire {
    background: var(--el-fire-tint);
    border-color: var(--el-fire-border);
}
.ap-element-chip[data-element="Fire"] .ap-element-chip-name,
.ap-element-chip--fire .ap-element-chip-name { color: var(--el-fire); }

.ap-element-chip[data-element="Earth"],
.ap-element-chip--earth {
    background: var(--el-earth-tint);
    border-color: var(--el-earth-border);
}
.ap-element-chip[data-element="Earth"] .ap-element-chip-name,
.ap-element-chip--earth .ap-element-chip-name { color: var(--el-earth); }

.ap-element-chip[data-element="Metal"],
.ap-element-chip--metal {
    background: var(--el-metal-tint);
    border-color: var(--el-metal-border);
}
.ap-element-chip[data-element="Metal"] .ap-element-chip-name,
.ap-element-chip--metal .ap-element-chip-name { color: var(--el-metal); }

.ap-element-chip[data-element="Water"],
.ap-element-chip--water {
    background: var(--el-water-tint);
    border-color: var(--el-water-border);
}
.ap-element-chip[data-element="Water"] .ap-element-chip-name,
.ap-element-chip--water .ap-element-chip-name { color: var(--el-water); }


/* ── Element variant cards (the "Wood Dog / Fire Dog / Earth Dog" section) ──
   Each variant card should carry the visual identity of its element. */

.ap-variant-card[data-element="Wood"],
.ap-variant-card--wood {
    background: var(--el-wood-tint);
    border-color: var(--el-wood-border);
}
.ap-variant-card[data-element="Fire"],
.ap-variant-card--fire {
    background: var(--el-fire-tint);
    border-color: var(--el-fire-border);
}
.ap-variant-card[data-element="Earth"],
.ap-variant-card--earth {
    background: var(--el-earth-tint);
    border-color: var(--el-earth-border);
}
.ap-variant-card[data-element="Metal"],
.ap-variant-card--metal {
    background: var(--el-metal-tint);
    border-color: var(--el-metal-border);
}
.ap-variant-card[data-element="Water"],
.ap-variant-card--water {
    background: var(--el-water-tint);
    border-color: var(--el-water-border);
}

/* Variant card title gets the element color */
.ap-variant-card[data-element="Wood"] .ap-variant-name,
.ap-variant-card--wood .ap-variant-name { color: var(--el-wood); }
.ap-variant-card[data-element="Fire"] .ap-variant-name,
.ap-variant-card--fire .ap-variant-name { color: var(--el-fire); }
.ap-variant-card[data-element="Earth"] .ap-variant-name,
.ap-variant-card--earth .ap-variant-name { color: var(--el-earth); }
.ap-variant-card[data-element="Metal"] .ap-variant-name,
.ap-variant-card--metal .ap-variant-name { color: var(--el-metal); }
.ap-variant-card[data-element="Water"] .ap-variant-name,
.ap-variant-card--water .ap-variant-name { color: var(--el-water); }


/* ── Year tiles (the "Years: 1946 · 1958 · 1970..." grid)
   Each tile should color by its year's element. The renderer
   may emit .ap-year-tile--wood etc. classes or data-element. */

.ap-year-tile[data-element="Wood"],
.ap-year-tile--wood {
    background: var(--el-wood-tint);
    border-color: var(--el-wood-border);
}
.ap-year-tile[data-element="Wood"] .ap-year-tile-element,
.ap-year-tile--wood .ap-year-tile-element { color: var(--el-wood); }

.ap-year-tile[data-element="Fire"],
.ap-year-tile--fire {
    background: var(--el-fire-tint);
    border-color: var(--el-fire-border);
}
.ap-year-tile[data-element="Fire"] .ap-year-tile-element,
.ap-year-tile--fire .ap-year-tile-element { color: var(--el-fire); }

.ap-year-tile[data-element="Earth"],
.ap-year-tile--earth {
    background: var(--el-earth-tint);
    border-color: var(--el-earth-border);
}
.ap-year-tile[data-element="Earth"] .ap-year-tile-element,
.ap-year-tile--earth .ap-year-tile-element { color: var(--el-earth); }

.ap-year-tile[data-element="Metal"],
.ap-year-tile--metal {
    background: var(--el-metal-tint);
    border-color: var(--el-metal-border);
}
.ap-year-tile[data-element="Metal"] .ap-year-tile-element,
.ap-year-tile--metal .ap-year-tile-element { color: var(--el-metal); }

.ap-year-tile[data-element="Water"],
.ap-year-tile--water {
    background: var(--el-water-tint);
    border-color: var(--el-water-border);
}
.ap-year-tile[data-element="Water"] .ap-year-tile-element,
.ap-year-tile--water .ap-year-tile-element { color: var(--el-water); }


/* ── Element banner (the row that shows "You are a [Earth] [Dog]"
   when the user picks an element variant from the selector). ──
   The whole banner should carry the element's identity. */

.ap-element-banner[data-element="Wood"]  { background: linear-gradient(135deg, var(--el-wood-tint), transparent 70%); border-color: var(--el-wood-border); }
.ap-element-banner[data-element="Fire"]  { background: linear-gradient(135deg, var(--el-fire-tint), transparent 70%); border-color: var(--el-fire-border); }
.ap-element-banner[data-element="Earth"] { background: linear-gradient(135deg, var(--el-earth-tint), transparent 70%); border-color: var(--el-earth-border); }
.ap-element-banner[data-element="Metal"] { background: linear-gradient(135deg, var(--el-metal-tint), transparent 70%); border-color: var(--el-metal-border); }
.ap-element-banner[data-element="Water"] { background: linear-gradient(135deg, var(--el-water-tint), transparent 70%); border-color: var(--el-water-border); }

.ap-element-banner[data-element="Wood"]  .ap-element-banner-badge { color: var(--el-wood);  border-color: var(--el-wood-border); }
.ap-element-banner[data-element="Fire"]  .ap-element-banner-badge { color: var(--el-fire);  border-color: var(--el-fire-border); }
.ap-element-banner[data-element="Earth"] .ap-element-banner-badge { color: var(--el-earth); border-color: var(--el-earth-border); }
.ap-element-banner[data-element="Metal"] .ap-element-banner-badge { color: var(--el-metal); border-color: var(--el-metal-border); }
.ap-element-banner[data-element="Water"] .ap-element-banner-badge { color: var(--el-water); border-color: var(--el-water-border); }


/* ════════════════════════════════════════════════════════════════
   3. GOLD-AS-SCARCE DISCIPLINE
   Gold is reserved for: the brand accent on the main eyebrow labels,
   the hero CTA, the exit ramps, and the lucky fortune side. Everywhere
   else, defer to element colors or neutral text.
   ════════════════════════════════════════════════════════════════ */

/* Trait badges in the hero ("Loyal / Honest / Amiable") — currently
   probably gold or accent-colored. Make them neutral text in soft
   rounded chips so the eye reads them as a single ensemble rather
   than competing accents. */

.ap-trait-badge,
.ap-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(232, 224, 212, 0.88);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

/* The "Best" and "Challenge" pills do get colored — they're carrying
   semantic meaning (good match / hard match) so the color earns its
   place. Best gets a soft green; Challenge gets a warm red. */
.ap-pill--best {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.32);
    color: rgba(150, 220, 160, 0.95);
}
.ap-pill--warn {
    background: rgba(255, 107, 53, 0.06);
    border-color: rgba(255, 107, 53, 0.28);
    color: rgba(255, 160, 130, 0.95);
}


/* Career tags (small tags shown under career section) — quiet treatment */
.ap-career-tag {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(232, 224, 212, 0.78);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    letter-spacing: 0.01em;
}


/* Fortune card headings — keep the existing green/red treatment for
   "lucky" vs "unlucky" since that's semantically meaningful, but
   refine the typography */
.ap-fortune-heading {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.ap-fortune-heading--lucky {
    color: rgba(76, 175, 88, 0.85);
}

.ap-fortune-heading--unlucky {
    color: rgba(226, 110, 95, 0.85);
}


/* ════════════════════════════════════════════════════════════════
   4. RHYTHM & WHITESPACE
   Section spacing and edge-band treatment so the page reads as a
   sequence of acts. Each major section gets the same outer max-width
   for visual consistency (matching the four-pillars approach).
   ════════════════════════════════════════════════════════════════ */

:root {
    --ap-content-width: 1240px;
    --ap-reading-width: 780px;
    --ap-content-pad: 1.75rem;
}

/* Lock all major sections to the same outer width. The existing
   max-widths from animal-page-enhanced.css may differ; this
   harmonizes them. */
.ap-hero .ap-hero-inner,
.ap-section,
.ap-element-nav,
.ap-element-banner,
.ap-horoscope-promo {
    max-width: var(--ap-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ap-content-pad);
    padding-right: var(--ap-content-pad);
    box-sizing: border-box;
}

/* Reading-width constraint inside sections for prose-dense blocks */
.ap-soul-narrative,
.ap-section > p,
.ap-content-card p {
    max-width: var(--ap-reading-width);
}

/* Center prose blocks that should be centered */
.ap-soul-narrative {
    margin-left: auto;
    margin-right: auto;
}


@media (max-width: 900px) {
    :root {
        --ap-content-pad: 1.4rem;
    }
    /* Reading width relaxes on tablet */
    .ap-soul-narrative,
    .ap-section > p,
    .ap-content-card p {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    :root {
        --ap-content-pad: 1rem;
    }
}


/* ════════════════════════════════════════════════════════════════
   END OF PASS 1
   Future passes will address:
     - The Earthly Branch panel (currently a single-line orphan)
     - Emoji → custom iconography
     - Section weight hierarchy
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   PASS 2 — EARTHLY BRANCH EXPANDED PANEL
   The original panel was a single-line strip:
     [character glyph] [label] [value]
   sitting between the Fortune card and Strengths/Weaknesses,
   reading as orphaned content. The expanded version uses a
   two-column layout: large character glyph on the left, prose
   + metadata grid on the right.
   ════════════════════════════════════════════════════════════════ */

.ap-earthly-branch--expanded {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.75rem;
    align-items: center;
    margin: 2rem 0;
    padding: 1.75rem 2rem;
    background:
        linear-gradient(135deg,
            rgba(232, 197, 71, 0.04) 0%,
            transparent 60%
        ),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(232, 197, 71, 0.12);
}

/* Left: the big character glyph + pinyin underneath */
.ap-earthly-glyph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(232, 197, 71, 0.18);
}

/* Override the existing .ap-earthly-char styling.
   The base CSS had it at 2.5rem; here we go much bigger
   since this is now the visual anchor of the panel. */
.ap-earthly-branch--expanded .ap-earthly-char {
    font-family: var(--ap-font-han);
    font-size: 5rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ap-accent);
    margin: 0;
}

.ap-earthly-pinyin {
    font-family: var(--ap-font-display);
    font-style: italic;
    font-size: 1rem;
    color: rgba(232, 224, 212, 0.65);
    letter-spacing: 0.02em;
}

/* Right: prose + metadata */
.ap-earthly-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ap-earthly-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ap-accent);
    opacity: 0.8;
}

.ap-earthly-title {
    font-family: var(--ap-font-display);
    font-size: 1.55rem;
    font-weight: 600;
    color: rgba(232, 224, 212, 0.95);
    margin: 0;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.ap-earthly-summary {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(232, 224, 212, 0.78);
    margin: 0;
}

/* Metadata grid: Element / Season / Peak Hour / Zodiac Animal
   Each cell is a small label + value pair, arranged in a
   responsive grid. */
.ap-earthly-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ap-earthly-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ap-earthly-meta-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 224, 212, 0.5);
}

.ap-earthly-meta-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(232, 224, 212, 0.92);
}

/* The element name value gets colored by its element via
   data-element. Uses the same five tokens from Pass 1. */
.ap-earthly-meta-value[data-element="Wood"]  { color: var(--el-wood); }
.ap-earthly-meta-value[data-element="Fire"]  { color: var(--el-fire); }
.ap-earthly-meta-value[data-element="Earth"] { color: var(--el-earth); }
.ap-earthly-meta-value[data-element="Metal"] { color: var(--el-metal); }
.ap-earthly-meta-value[data-element="Water"] { color: var(--el-water); }


/* Mobile: stack the layout, shrink the glyph */
@media (max-width: 720px) {
    .ap-earthly-branch--expanded {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.4rem 1.25rem;
    }
    .ap-earthly-glyph {
        flex-direction: row;
        gap: 1rem;
        padding: 0.85rem 1.25rem;
    }
    .ap-earthly-branch--expanded .ap-earthly-char {
        font-size: 3.5rem;
    }
    .ap-earthly-title {
        font-size: 1.3rem;
    }
    .ap-earthly-meta {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.85rem;
    }
}

@media (max-width: 480px) {
    .ap-earthly-branch--expanded {
        padding: 1.2rem 1rem;
    }
    .ap-earthly-meta {
        grid-template-columns: 1fr;
    }
}



/* ════════════════════════════════════════════════════════════════
   MOVE 2 — TYPOGRAPHIC ICONS (emoji replacement)
   Emoji have been swapped for Chinese characters and unicode
   geometric symbols in the markup. The CSS here styles those
   characters so they read as deliberate iconography rather than
   raw text.

   Mapping (now in markup):
     Fortune icons: 数 (numbers), 色 (colors), 花 (flowers),
                    方 (directions), 时 (time/hours)
     Element nav:   木 火 土 金 水
     Gauge labels:  事 (career), 爱 (love), 财 (wealth), 健 (health)
     Fun fact:      ✦
   ════════════════════════════════════════════════════════════════ */

/* Fortune card icons — was emoji at default size, now Chinese
   character in display serif tinted by the fortune side (lucky/unlucky) */
.ap-fortune-icon {
    font-family: var(--ap-font-han);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: rgba(232, 224, 212, 0.55);
    /* No background, no border — clean type */
}

/* Lucky side icons get a soft green tint */
.ap-fortune-side--lucky .ap-fortune-icon {
    color: rgba(76, 175, 88, 0.80);
}

/* Unlucky side icons get a soft red tint */
.ap-fortune-side--unlucky .ap-fortune-icon {
    color: rgba(226, 110, 95, 0.80);
}


/* Fun fact icon — was 💡, now ✦. Style as a small gold dingbat. */
.ap-fun-fact-icon {
    font-family: serif;
    font-size: 1rem;
    color: var(--ap-accent);
    opacity: 0.85;
    margin-right: 0.5rem;
    display: inline-block;
    transform: translateY(-0.05em);
}


/* Element nav characters (木火土金水) — styled to read as a
   five-element row, each tinted by its element. The selector
   targets the character span inside the existing element nav
   structure. */

/* Generic styling for the element nav glyphs */
.ap-element-card .ap-element-emoji,
.ap-element-pill .ap-element-emoji,
.ap-element-nav .ap-element-emoji {
    font-family: var(--ap-font-han);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    display: inline-block;
    margin-right: 0.4rem;
}

/* The Keep Exploring links no longer have icon spans inside them.
   They look cleaner as pure typography links now. Make sure they
   sit comfortably in the grid without the visual weight that
   emoji used to carry. */
.ap-explore-link {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.2rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(232, 224, 212, 0.88);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-decoration: none;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.ap-explore-link::before {
    content: '◆';
    margin-right: 0.6rem;
    font-size: 0.65rem;
    color: var(--ap-accent);
    opacity: 0.6;
    transform: translateY(-0.1em);
    display: inline-block;
}

.ap-explore-link:hover {
    border-color: rgba(232, 197, 71, 0.4);
    background: rgba(232, 197, 71, 0.05);
    color: rgba(232, 224, 212, 1);
}

.ap-explore-link:hover::before {
    opacity: 1;
}


/* Gauge labels in the soul profile (事/爱/财/健 instead of emoji) —
   render in display serif for editorial feel. */
.ap-gauge-icon {
    font-family: var(--ap-font-han);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ap-accent);
    opacity: 0.85;
    line-height: 1;
}


/* ════════════════════════════════════════════════════════════════
   EDITORIAL LOVE SECTION (Mockup B)
   Pure typography play — bigger headlines, two-tone treatment,
   italic lede line, drop cap, background watermark character,
   rule-divided editorial blocks instead of cards.

   Structure:
     .ap-section--editorial         the whole section, with watermark
       .ap-section-watermark        big Chinese character behind
       .ap-section-head             eyebrow + h2 + lede block
         .ap-section-h2--two-tone   "The Dog" / "in Love" split
         .ap-section-lede           italic display serif tagline
       .ap-love-editorial           two-column layout
         .ap-love-lead              left column - the focal column
           .ap-love-lead-prose      gets drop cap on first letter
         .ap-love-supporting        right column - rule-divided blocks
           .ap-love-block           each editorial block
       .ap-love-closer              Ideal Partner Energy at bottom

   This section breaks the rhythm of the rest of the page — it's
   the mid-page editorial moment.
   ════════════════════════════════════════════════════════════════ */

/* The editorial section. Padding-top set to 0 to override the
   Pass 4a .ap-section { padding-top: 4.5rem } rule (which cascades
   later in the file and was creating a huge gap above the watermark
   and section head).

   With zero padding-top, the watermark anchors at the natural top
   of the section and the section-head text overlaps it directly,
   which is what we want: the character behind the head, not above it.

   Source-order matters here: this rule must come AFTER the generic
   .ap-section padding rule from Pass 4a. We use higher specificity
   to guarantee the override regardless of order. */
.ap-section.ap-section--editorial {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 4rem;
    margin-top: 2.5rem;  /* breath above, replaces padding-top */
}

/* Background watermark — the Earthly Branch character behind the
   editorial content. Positioned to sit behind both columns of the
   two-column layout: anchored toward the left, sized wide enough
   that it extends across into the right column.

   Vertical position: roughly centered on the two-column content
   area (not on the section as a whole, since the section also
   contains the head above and the closer below). */
.ap-section-watermark {
    position: absolute;
    top: 35%;
    left: -40px;
    bottom: auto;
    right: auto;
    font-family: var(--ap-font-han, 'Noto Serif SC', 'Songti SC', serif);
    font-size: 600px;
    line-height: 0.85;
    font-weight: 500;
    color: var(--ap-accent);
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    /* Soft blur prevents the character edges from feeling like a
       sharp logo - it should feel like ambient paper texture */
    filter: blur(0.5px);
}

/* All content (except the watermark) sits above the watermark.
   The :not() exclusion is critical — without it, the watermark
   itself gets position: relative from this rule, which overrides
   its own position: absolute. That puts the watermark INTO the
   document flow at its full ~370px height, which pushes everything
   below it down by 370px. */
.ap-section--editorial > *:not(.ap-section-watermark) {
    position: relative;
    z-index: 1;
}


/* ── Section head: eyebrow → big two-tone H2 → italic lede ── */

.ap-section-head {
    max-width: 720px;
    margin-bottom: 4.5rem;
}

/* Two-tone H2: "The Dog" muted, "in Love" italic gold */
.ap-section-h2--two-tone {
    font-family: var(--ap-font-display);
    font-size: 3.8rem;
    line-height: 1.0;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: rgba(232, 224, 212, 0.95);
    margin: 0 0 0.7rem;
}

.ap-section-h2--two-tone .ap-h2-lead {
    color: rgba(232, 224, 212, 0.92);
    margin-right: 0.25em;
}

.ap-section-h2--two-tone .ap-h2-accent {
    font-style: italic;
    color: var(--ap-accent);
    font-weight: 500;
}

/* The lede line — single italic sentence, editorial voice */
.ap-section-lede {
    font-family: var(--ap-font-display);
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1.5;
    color: rgba(232, 224, 212, 0.7);
    max-width: 640px;
    margin: 0;
}


/* ── Two-column editorial layout ── */

.ap-love-editorial {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 4rem;
}


/* Left column — the lead editorial moment */
.ap-love-lead {
    position: relative;
}

.ap-love-lead-eyebrow {
    display: block;
    color: var(--ap-accent);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.85rem;
    opacity: 0.9;
}

/* Lead column eyebrow gets element-tinted color when data-element present */
.ap-love-lead[data-element="Wood"]  .ap-love-lead-eyebrow { color: var(--el-wood); }
.ap-love-lead[data-element="Fire"]  .ap-love-lead-eyebrow { color: var(--el-fire); }
.ap-love-lead[data-element="Earth"] .ap-love-lead-eyebrow { color: var(--el-earth); }
.ap-love-lead[data-element="Metal"] .ap-love-lead-eyebrow { color: var(--el-metal); }
.ap-love-lead[data-element="Water"] .ap-love-lead-eyebrow { color: var(--el-water); }

.ap-love-lead-title {
    font-family: var(--ap-font-display);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.05;
    color: rgba(232, 224, 212, 0.95);
    margin: 0 0 0.8rem;
    letter-spacing: -0.008em;
}

/* Caption underneath the H3: "戌 · Xu · the Earthly Branch" */
.ap-love-lead-caption {
    display: block;
    font-family: var(--ap-font-display);
    font-size: 0.98rem;
    font-style: italic;
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
    opacity: 0.75;
}

.ap-love-lead[data-element="Wood"]  .ap-love-lead-caption { color: var(--el-wood); }
.ap-love-lead[data-element="Fire"]  .ap-love-lead-caption { color: var(--el-fire); }
.ap-love-lead[data-element="Earth"] .ap-love-lead-caption { color: var(--el-earth); }
.ap-love-lead[data-element="Metal"] .ap-love-lead-caption { color: var(--el-metal); }
.ap-love-lead[data-element="Water"] .ap-love-lead-caption { color: var(--el-water); }


/* Lead prose: bigger size, longer line height, drop cap on opening */
.ap-love-lead-prose p {
    font-size: 1.12rem;
    line-height: 1.78;
    color: rgba(232, 224, 212, 0.88);
    max-width: 560px;
    margin: 0 0 1.2rem;
}

/* Drop cap — the opening letter of the first paragraph rendered
   large in display serif, element-colored. Classic editorial move. */
.ap-love-lead-prose p:first-of-type::first-letter {
    font-family: var(--ap-font-display);
    font-size: 3.6rem;
    font-weight: 600;
    line-height: 0.95;
    float: left;
    padding: 6px 14px 0 0;
    color: var(--ap-accent);
}

.ap-love-lead[data-element="Wood"]  .ap-love-lead-prose p:first-of-type::first-letter { color: var(--el-wood); }
.ap-love-lead[data-element="Fire"]  .ap-love-lead-prose p:first-of-type::first-letter { color: var(--el-fire); }
.ap-love-lead[data-element="Earth"] .ap-love-lead-prose p:first-of-type::first-letter { color: var(--el-earth); }
.ap-love-lead[data-element="Metal"] .ap-love-lead-prose p:first-of-type::first-letter { color: var(--el-metal); }
.ap-love-lead[data-element="Water"] .ap-love-lead-prose p:first-of-type::first-letter { color: var(--el-water); }


/* Right column — rule-divided editorial blocks (not cards) */
.ap-love-supporting {
    display: flex;
    flex-direction: column;
}

.ap-love-block {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ap-love-block:first-child {
    border-top: none;
    padding-top: 0;
}

.ap-love-block h4 {
    font-family: var(--ap-font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: rgba(232, 224, 212, 0.95);
    margin: 0 0 0.5rem;
    letter-spacing: -0.003em;
}

.ap-love-block p {
    font-size: 0.96rem;
    line-height: 1.65;
    color: rgba(232, 224, 212, 0.72);
    margin: 0;
}


/* Closer — Ideal Partner Energy, sits below as the section's
   concluding moment. Element-tinted gradient background. */
.ap-love-closer {
    margin-top: 1rem;
    padding: 2rem 2.25rem;
    background: linear-gradient(
        135deg,
        rgba(232, 197, 71, 0.05) 0%,
        rgba(199, 125, 255, 0.04) 100%
    );
    border: 1px solid rgba(232, 197, 71, 0.18);
    border-radius: 14px;
}

.ap-love-closer-eyebrow {
    display: block;
    color: var(--ap-accent);
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.7rem;
    opacity: 0.9;
}

.ap-love-closer-title {
    font-family: var(--ap-font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: rgba(232, 224, 212, 0.98);
    margin: 0 0 0.85rem;
    letter-spacing: -0.005em;
}

.ap-love-closer p {
    font-size: 1.02rem;
    line-height: 1.72;
    color: rgba(232, 224, 212, 0.85);
    margin: 0;
}


/* ── Responsive ── */

@media (max-width: 900px) {
    .ap-section.ap-section--editorial {
        padding-top: 0;
        padding-bottom: 3rem;
        margin-top: 1.5rem;
    }

    .ap-section-watermark {
        font-size: 440px;
        top: 30%;
        left: -30px;
        bottom: auto;
        right: auto;
    }

    .ap-section-head {
        margin-bottom: 3rem;
    }

    .ap-section-h2--two-tone {
        font-size: 2.6rem;
    }

    .ap-section-lede {
        font-size: 1.15rem;
    }

    .ap-love-editorial {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .ap-love-lead-title {
        font-size: 1.95rem;
    }

    .ap-love-closer {
        padding: 1.5rem 1.5rem;
    }

    .ap-love-closer-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 600px) {
    .ap-section.ap-section--editorial {
        padding-top: 0;
        margin-top: 1rem;
    }

    .ap-section-watermark {
        font-size: 320px;
        top: 30%;
        left: -20px;
        bottom: auto;
        right: auto;
    }

    .ap-section-h2--two-tone {
        font-size: 2.15rem;
    }

    .ap-section-lede {
        font-size: 1.02rem;
    }

    .ap-love-lead-title {
        font-size: 1.7rem;
    }

    .ap-love-lead-prose p {
        font-size: 1.02rem;
    }

    .ap-love-lead-prose p:first-of-type::first-letter {
        font-size: 2.8rem;
    }

    .ap-love-closer {
        padding: 1.3rem 1.15rem;
    }
}


/* ════════════════════════════════════════════════════════════════
   PASS 4a — BASELINE TYPOGRAPHY ELEVATION
   Promotes typography hierarchy and vertical rhythm across ALL
   sections of the page (not just the editorial love section).

   What this does:
     1. Larger, more confident section H2s (was inherited size,
        now explicitly 2.6-3rem display serif)
     2. Consistent vertical breath between sections (was tight,
        now generous - sections feel like deliberate moments)
     3. Better eyebrow → headline rhythm (more space below the
        eyebrow label before the headline drops in)
     4. Consistent intro paragraph treatment for sections that
        have a one-sentence lede

   What this deliberately does NOT do:
     - Apply two-tone headline treatment (love section only)
     - Apply watermark character (love section only)
     - Apply drop cap (love section only)
     - Change card structures (those stay per-section)

   The result: the love section remains the page's editorial
   moment, but every other section also benefits from a stronger
   typographic baseline.
   ════════════════════════════════════════════════════════════════ */

/* ── Vertical rhythm: section spacing ── */

/* All major sections get generous top padding so each section
   reads as a deliberate moment, not a continuation of the previous.
   This applies broadly; the editorial section overrides above
   (it has overflow:hidden + watermark and uses its own padding). */
.ap-section {
    padding-top: 4.5rem;
    padding-bottom: 2.5rem;
}

/* The first section after the hero shouldn't double-pad against
   the hero's bottom margin */
.ap-hero + .ap-section,
.ap-section.ap-section--first {
    padding-top: 3rem;
}


/* ── Eyebrow label spacing ── */

/* The eyebrow → headline relationship. Eyebrow gets a generous
   margin-bottom so the headline drops in deliberately, not crowded. */
.ap-section > .ap-label {
    display: block;
    margin-bottom: 1.4rem;
}


/* ── Section H2 sizing ── */

/* All section H2s get an explicit larger size with the display
   serif. This was previously only setting font-family in Pass 1.
   Now we commit to the full typographic treatment. */
.ap-section > h2,
section.ap-section > h2 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.012em;
    color: rgba(232, 224, 212, 0.95);
    margin: 0 0 1.2rem;
    max-width: 720px;
}


/* ── Section intro lede ── */

/* Optional italic lede class for sections that have a one-sentence
   intro paragraph. Use class .ap-section-intro on the <p> directly
   after the H2 to apply this treatment.

   The existing .ap-muted treatment (used for some current intros
   like the Personality Map intro) gets a softer upgrade so it
   doesn't fight the new H2 sizing. */
.ap-section > p.ap-section-intro,
.ap-section > p.ap-muted:first-of-type {
    font-family: var(--ap-font-display);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.55;
    color: rgba(232, 224, 212, 0.72);
    max-width: 640px;
    margin: 0 0 2.5rem;
}


/* ── Card heading sizes (slight increase to match the new H2 scale) ── */

/* The h3s inside content cards get a small bump in display weight
   so they don't look tiny under the bigger H2s. */
.ap-section .ap-content-card h3 {
    font-size: 1.25rem;
    line-height: 1.25;
    margin-bottom: 0.6rem;
}


/* ── Edge case: sections with no eyebrow ── */

/* Some sections may have H2 without a preceding eyebrow. In that
   case the H2 needs its own top margin since it doesn't get the
   spacing from .ap-label margin-bottom. */
.ap-section > h2:first-child,
.ap-section > section.ap-section h2:first-child {
    margin-top: 0;
}


/* ── Responsive: scale down on smaller viewports ── */

@media (max-width: 900px) {
    .ap-section {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }
    .ap-section > h2,
    section.ap-section > h2 {
        font-size: 2.1rem;
    }
    .ap-section > p.ap-section-intro,
    .ap-section > p.ap-muted:first-of-type {
        font-size: 1.1rem;
    }
}

@media (max-width: 600px) {
    .ap-section {
        padding-top: 2.5rem;
        padding-bottom: 1.5rem;
    }
    .ap-section > h2,
    section.ap-section > h2 {
        font-size: 1.75rem;
    }
    .ap-section > p.ap-section-intro,
    .ap-section > p.ap-muted:first-of-type {
        font-size: 1rem;
    }
}


/* ════════════════════════════════════════════════════════════════
   GROUP 1 — READABILITY PASS
   Universal improvements to body prose across all sections.
   No markup changes; pure CSS targeting existing classes.

   What this does:
     1a. Line length constraint on prose blocks (max 65ch)
     1b. Body prose font-size bump (16 → 17-18px)
     1c. Better paragraph spacing in long prose
     1d. Tabular figures for numeric callouts (years, lucky numbers)
   ════════════════════════════════════════════════════════════════ */

/* ── 1a + 1b: Reading width and size for body prose ──
   The optimal line length for sustained reading is 50-75 characters.
   At 17px body size, that's roughly 580-720px. We constrain prose
   blocks to this range. Excludes already-narrow contexts (cards,
   editorial layout, callouts) which set their own constraints. */

.ap-section > p,
.ap-overview p,
.ap-soul-narrative p,
.ap-section .ap-prose p {
    font-size: 1.06rem;          /* ~17px - up from default ~16px */
    line-height: 1.75;            /* loose for reading */
    max-width: 68ch;              /* the line-length sweet spot */
    color: rgba(232, 224, 212, 0.85);
}

/* Section-intro ledes already have their own treatment from Pass 4a.
   Don't double-apply. */
.ap-section > p.ap-section-intro,
.ap-section > p.ap-muted:first-of-type {
    /* Inherits Pass 4a italic display treatment; just enforce width */
    max-width: 65ch;
}


/* ── 1c: Paragraph spacing in long prose ──
   Multi-paragraph prose blocks need clear spacing between paragraphs.
   The Soul Profile, Health, Career narratives often have 3-5
   paragraphs that currently butt against each other. */

.ap-section > p + p,
.ap-overview p + p,
.ap-soul-narrative p + p {
    margin-top: 1.2rem;
}

/* Inside content cards, paragraph spacing is tighter */
.ap-content-card p + p,
.ap-love-block p + p {
    margin-top: 0.9rem;
}


/* ── 1d: Tabular figures for numeric callouts ──
   Years, lucky numbers, dates, statistics. Tabular figures make
   digits the same width so columns of numbers align cleanly.
   Falls back gracefully on fonts without OpenType tnum feature. */

.ap-hero-years-line,
.ap-fortune-value,
.ap-year-tile-year,
.ap-year-grid,
.ap-compat-score,
.ap-trait-score,
.ap-radar-axis-value {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
}


/* ── Better prose readability in content cards ──
   Card paragraphs were running at default 16px which feels small
   relative to the new H2 sizes. Bump to 17px and adjust line-height. */

.ap-content-card p {
    font-size: 1.04rem;
    line-height: 1.7;
}


/* ════════════════════════════════════════════════════════════════
   GROUP 3c — SECTION TRANSITION DIVIDERS
   A small typographic separator between major sections so the page
   feels like a curated publication with distinct chapters, not a
   continuous scroll of cards.

   The divider is a thin gold rule with a small Chinese character
   (◆) at the center. Sits between sections via CSS ::before on
   each section after the first. No markup changes needed.

   Visual: ─────── ◆ ───────
   Hairline rule with a small accent character at the midpoint.
   ════════════════════════════════════════════════════════════════ */

/* Skip the divider on the first content section (the one right
   after the hero) and on sections that have their own visual
   opening like the editorial section. */
.ap-section + .ap-section:not(.ap-section--editorial):not(.ap-section--no-divider)::before {
    content: '◆';
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: var(--ap-accent);
    opacity: 0.4;
    margin: 0 auto 2.5rem;
    position: relative;
    width: 80px;
    line-height: 1;
}

/* Add the hairline rules flanking the character */
.ap-section + .ap-section:not(.ap-section--editorial):not(.ap-section--no-divider)::before {
    background-image:
        linear-gradient(
            to right,
            transparent 0,
            transparent calc(50% - 60px),
            rgba(232, 197, 71, 0.25) calc(50% - 60px),
            rgba(232, 197, 71, 0.25) calc(50% - 14px),
            transparent calc(50% - 14px),
            transparent calc(50% + 14px),
            rgba(232, 197, 71, 0.25) calc(50% + 14px),
            rgba(232, 197, 71, 0.25) calc(50% + 60px),
            transparent calc(50% + 60px),
            transparent 100%
        );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: center;
    width: 100%;
    padding: 0;
    line-height: 1.4;
}

/* Reduce top padding on sections that now have a divider above */
.ap-section + .ap-section:not(.ap-section--editorial):not(.ap-section--no-divider) {
    padding-top: 2rem;
}


/* ════════════════════════════════════════════════════════════════
   GROUP 3e — SCROLL-TRIGGERED FADE-UP ON SECTIONS
   Subtle entry animation as sections come into view.
   Uses CSS-only approach with @starting-style for modern browsers,
   falls back gracefully on older browsers (no animation, just
   visible content).

   Uses the View Timeline API via @scroll-driven animations where
   supported. Designed to be very subtle - a 8px translate + opacity
   fade, no longer than 0.6s. Should feel like quality, not "wow."
   ════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
    .ap-section {
        animation: ap-section-rise linear both;
        animation-timeline: view();
        /* Animation runs from entry+0% to entry+25% of the viewport */
        animation-range: entry 0% entry 30%;
    }

    @keyframes ap-section-rise {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ap-section {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES FOR GROUPS 1 AND 3
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .ap-section > p,
    .ap-overview p,
    .ap-soul-narrative p,
    .ap-section .ap-prose p {
        font-size: 1rem;
        max-width: 100%;
    }

    /* Divider scales down */
    .ap-section + .ap-section:not(.ap-section--editorial):not(.ap-section--no-divider)::before {
        margin-bottom: 1.75rem;
    }
}

@media (max-width: 600px) {
    .ap-section > p,
    .ap-overview p,
    .ap-soul-narrative p,
    .ap-section .ap-prose p {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .ap-content-card p {
        font-size: 0.98rem;
    }

    .ap-section + .ap-section:not(.ap-section--editorial):not(.ap-section--no-divider)::before {
        margin-bottom: 1.5rem;
        font-size: 0.62rem;
    }
}