/* ============================================================
   THE UNFOLDING MAP — main.css
   Final clean version — no duplicates
   Backgrounds handled by functions.php

   STRUCTURE:
   1.  Google Fonts
   2.  Design tokens
   3.  Base / body
   4.  Progress bar
   5.  Header + navigation
   6.  Footer
   7.  Buttons + links
   8.  Labels + meta
   9.  Section heads
   10. Hero section
   11. Lotus frame + orbit (divider section)
   12. Section cards
   13. Journey posts
   14. About strip
   15. Universe / orbit
   16. Single post
   17. About page
   18. Cosmic effects
   19. Pagination
   20. Archive pages
   21. Hero animation effects
   22. Post bottom (follow, rating, comments)
   23. Comprehensive fixes
   24. Responsive
   ============================================================ */

/* ============================================================
   1. GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Cherry+Swash:wght@400;700&family=Courgette&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  --um-void:     #05060f;
  --um-glass:    rgba(255,255,255,.06);
  --um-glass-b:  rgba(255,255,255,.10);
  --um-purple:   #a78bfa;
  --um-purple-d: #7c5cbf;
  --um-gold:     #d4a84b;
  --um-cyan:     #4fc3c3;
  --um-parchment:#f0ebe2;
  --um-muted:    rgba(240,235,226,.70);
  --um-rule:     rgba(255,255,255,.08);
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fh: 'Cherry Swash', Georgia, serif;
  --fb: 'Lora', Georgia, serif;
  --fm: 'Space Mono', monospace;
  --fq: 'Courgette', cursive;
  --size-body:  1.15rem;
  --size-small: 0.95rem;
  --size-label: 0.72rem;
  --size-nav:   0.85rem;
  --size-h1:    clamp(2.4rem, 5.5vw, 3.8rem);
  --size-h2:    clamp(1.6rem, 2.8vw, 2.2rem);
  --size-h3:    1.3rem;
  --size-hero:  clamp(3rem, 5.8vw, 6rem);
  --s2: 0 8px 32px rgba(0,0,0,.45);
  --s3: 0 20px 60px rgba(0,0,0,.55);
  --glow:      0 0 40px rgba(167,139,250,.2);
  --glow-gold: 0 0 40px rgba(212,168,75,.16);
  --glow-cyan: 0 0 40px rgba(79,195,195,.16);
}

/* ============================================================
   3. BASE / BODY
   ============================================================ */
body {
  font-family: var(--fb) !important;
  font-size: var(--size-body) !important;
  font-weight: 400 !important;
  color: var(--um-parchment) !important;
  line-height: 1.85 !important;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden !important;
  min-height: 100vh;
  background: transparent !important;
  background-image: none !important;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(5,6,15,.72),
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(124,92,191,.13) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(79,195,195,.06) 0%, transparent 55%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 32% 65%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 12%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 42%, rgba(212,168,75,.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 78% 85%, rgba(167,139,250,.55) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 42% 30%, rgba(79,195,195,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 92%, rgba(255,255,255,.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 65%, rgba(255,255,255,.5) 0%, transparent 100%);
  animation: um-twinkle 7s ease-in-out infinite alternate;
}
@keyframes um-twinkle { 0%{opacity:.5} 50%{opacity:1} 100%{opacity:.6} }

#masthead, #page, #colophon, main, #main,
.um-hero, .um-section-cards, .um-posts-section,
.um-about-strip, .um-orbit-section,
.um-post-hero, .um-article-layout,
.um-about-hero, .um-about-content-section,
.um-about-site-section, .um-about-closing,
.um-archive-header, .um-archive-body {
  position: relative !important;
  z-index: 1 !important;
}
#page, #main, #content,
.site, .site-content,
.ct-container, .ct-section, .ct-content-area,
.hentry, article.type-page, article.type-post,
.entry-content-wrap, .blocksy-content {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}
.um-homepage .entry-header,
.home .entry-header,
body.home .entry-title { display: none !important; }
.ct-header, #header.ct-header,
.ct-footer, #footer.ct-footer { display: none !important; }

/* ============================================================
   4. PROGRESS BAR
   ============================================================ */
#um-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(to right, var(--um-purple), var(--um-gold));
  z-index: 9999; transition: width .1s linear;
}

/* ============================================================
   5. HEADER + NAVIGATION
   ============================================================ */
.um-header {
  position: sticky !important; top: 0 !important; z-index: 500 !important;
  background: rgba(5,6,15,.78) !important;
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  transition: background .3s, box-shadow .3s !important;
}
.um-header.um-scrolled { background: rgba(5,6,15,.95) !important; box-shadow: 0 2px 40px rgba(0,0,0,.6) !important; }
.um-header-inner { max-width: 1380px; margin: 0 auto; padding: 0 2.5rem; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.um-logo-wrap { display: flex; align-items: center; gap: .9rem; text-decoration: none; flex-shrink: 0; }
.um-logo-img { width: 52px; height: 52px; border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; flex-shrink: 0; }
.um-logo-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0 !important; filter: drop-shadow(0 0 8px rgba(167,139,250,.3)); }
.um-logo-name { font-family: var(--fh) !important; font-size: 1.4rem !important; font-weight: 700 !important; color: var(--um-parchment) !important; letter-spacing: .02em; line-height: 1.1; display: block; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-logo-name em { color: var(--um-purple) !important; font-style: normal !important; }
.um-logo-tagline { font-family: var(--fm) !important; font-size: .55rem !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--um-gold) !important; display: block; margin-top: 2px; }

/* Desktop nav */
.um-nav { display: flex; align-items: center; gap: 2rem; }
.um-nav-list { list-style: none; display: flex; align-items: center; gap: 1.8rem; margin: 0; padding: 0; }
.um-nav-list li a { font-family: var(--fm) !important; font-size: var(--size-nav) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: rgba(240,235,226,.60) !important; transition: color .2s !important; text-decoration: none !important; }
.um-nav-list li a:hover, .um-nav-list .current-menu-item > a { color: var(--um-parchment) !important; }
.um-nav-list .current-menu-item > a { color: var(--um-purple) !important; }
.um-nav-subscribe { padding: .44rem 1.3rem; background: linear-gradient(135deg, rgba(124,92,191,.35), rgba(196,98,45,.25)); background-size: 200%; border: 1px solid rgba(167,139,250,.25); border-radius: 99px; color: var(--um-parchment) !important; font-size: .75rem !important; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: all .25s; animation: um-btn-shift 5s ease infinite; }
.um-nav-subscribe:hover { box-shadow: var(--glow); }

/* Hamburger — hidden desktop, shown mobile via media query */
.um-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; z-index: 501; position: relative; }
.um-hamburger span { display: block; width: 26px; height: 2px; background: var(--um-parchment); border-radius: 2px; transition: all .3s; }
.um-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.um-hamburger.open span:nth-child(2) { opacity: 0; }
.um-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile drawer */
.um-mobile-drawer { position: fixed; top: 0; right: -100%; height: 100vh; width: 300px; z-index: 9999; background: rgba(5,6,15,.97); backdrop-filter: blur(24px); border-left: 1px solid rgba(255,255,255,.07); padding: 5rem 2rem 3rem; transition: right .35s cubic-bezier(.4,0,.2,1); }
.um-mobile-drawer.open { right: 0; }
.um-mobile-nav-list { list-style: none; padding: 0; margin: 0; }
.um-mobile-nav-list li { border-bottom: 1px solid rgba(255,255,255,.06); }
.um-mobile-nav-list li a { display: block; padding: 1.1rem 0; font-family: var(--fh); font-size: 1.5rem; font-weight: 700; color: rgba(240,235,226,.82); text-decoration: none; transition: color .2s; touch-action: manipulation; letter-spacing: .02em; }
.um-mobile-nav-list li a:hover { color: var(--um-purple); }
.um-drawer-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--um-muted); font-size: 1.2rem; cursor: pointer; z-index: 10000; }
.um-drawer-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.5); display: none; opacity: 0; transition: opacity .3s; }
.um-drawer-overlay.open { display: block; opacity: 1; }

/* ============================================================
   6. FOOTER
   ============================================================ */
.um-footer { border-top: 1px solid rgba(255,255,255,.07); background: rgba(5,6,15,.88) !important; backdrop-filter: blur(20px); position: relative; z-index: 1; }
.um-footer-inner { max-width: 1380px; margin: 0 auto; padding: 5rem 2.5rem 3rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3.5rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.um-footer-logo-wrap { display: flex; align-items: center; gap: .9rem; text-decoration: none; margin-bottom: 1.2rem; }
.um-footer-logo-img { width: 46px; height: 46px; flex-shrink: 0; border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; }
.um-footer-logo-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0 !important; filter: drop-shadow(0 0 6px rgba(167,139,250,.2)); }
.um-footer-logo-name { font-family: var(--fh); font-size: 1.2rem; font-weight: 600; color: var(--um-parchment); letter-spacing: .04em; display: block; }
.um-footer-logo-name em { color: var(--um-purple); font-style: normal; }
.um-footer-tagline { font-family: var(--fm); font-size: .48rem; letter-spacing: .2em; text-transform: uppercase; color: var(--um-gold); display: block; margin-top: 2px; }
.um-footer-desc { font-family: var(--fb); font-size: .9rem; color: rgba(240,235,226,.48); line-height: 1.8; max-width: 280px; }
.um-footer-col h4 { font-family: var(--fm) !important; font-size: .6rem !important; letter-spacing: .25em !important; text-transform: uppercase !important; margin-bottom: 1.3rem !important; display: block !important; }
.um-footer-col:nth-child(2) h4 { color: var(--um-purple) !important; }
.um-footer-col:nth-child(3) h4 { color: var(--um-gold) !important; }
.um-footer-col:nth-child(4) h4 { color: var(--um-cyan) !important; }
.um-footer-col ul { list-style: none; padding: 0; margin: 0; }
.um-footer-col li { margin-bottom: .7rem; }
.um-footer-col a { font-family: var(--fb); font-size: .95rem; color: rgba(240,235,226,.58); transition: color .2s; text-decoration: none; }
.um-footer-col a:hover { color: var(--um-parchment); }
.um-footer-bottom { max-width: 1380px; margin: 0 auto; padding: 1.5rem 2.5rem; display: flex; justify-content: space-between; align-items: center; font-family: var(--fm); font-size: .62rem; color: rgba(240,235,226,.22); letter-spacing: .08em; }

/* ============================================================
   7. BUTTONS + LINKS
   ============================================================ */
@keyframes um-btn-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.um-btn-primary { display: inline-flex !important; align-items: center !important; padding: 1rem 2.2rem !important; background: linear-gradient(135deg, #7c5cbf, #a78bfa, #c4622d) !important; background-size: 200% 200% !important; animation: um-btn-shift 4s ease infinite !important; border: 1px solid rgba(167,139,250,.35) !important; border-radius: 3px !important; color: #fff !important; font-family: var(--fm) !important; font-size: .88rem !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 500 !important; text-decoration: none !important; box-shadow: 0 4px 20px rgba(124,92,191,.3) !important; transition: transform .3s !important; }
.um-btn-primary:hover { transform: translateY(-2px) !important; color: #fff !important; }
.um-btn-secondary { display: inline-flex !important; align-items: center !important; padding: 1rem 2.2rem !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 3px !important; color: rgba(240,235,226,.65) !important; font-size: .88rem !important; letter-spacing: .14em !important; text-transform: uppercase !important; transition: all .3s !important; text-decoration: none !important; }
.um-btn-secondary:hover { border-color: rgba(255,255,255,.35) !important; color: var(--um-parchment) !important; }
.um-btn-orbit { display: inline-flex !important; align-items: center !important; padding: 1rem 2.2rem !important; background: linear-gradient(135deg, #8b6914, #d4a84b, #8b6914) !important; background-size: 200% !important; animation: um-btn-shift 4s ease infinite !important; border: 1px solid rgba(212,168,75,.35) !important; border-radius: 3px !important; color: #fff !important; font-size: .88rem !important; letter-spacing: .14em !important; text-transform: uppercase !important; font-weight: 500 !important; text-decoration: none !important; transition: transform .3s !important; }
.um-btn-orbit:hover { transform: translateY(-2px) !important; }
.um-read-link { display: inline-flex !important; align-items: center !important; gap: .5rem !important; font-size: .8rem !important; letter-spacing: .16em !important; text-transform: uppercase !important; font-weight: 500 !important; transition: gap .2s !important; text-decoration: none !important; color: var(--um-purple) !important; }
.um-read-link::after { content: '→' !important; }
.um-read-link:hover { gap: .9rem !important; }
.um-read-link-gold { color: var(--um-gold) !important; }
.um-view-all { text-align: center; padding: 2.5rem 0 0; }

/* ============================================================
   8. LABELS + META
   ============================================================ */
.um-badge { display: none !important; }
.um-deck { font-family: var(--fb) !important; font-style: italic !important; font-size: 1.15rem !important; color: rgba(240,235,226,.75) !important; line-height: 1.65 !important; margin-bottom: 2rem !important; max-width: 680px !important; margin-left: auto !important; margin-right: auto !important; }
.um-post-meta { display: flex; align-items: center; justify-content: center; gap: .9rem; font-family: var(--fm) !important; font-size: var(--size-label) !important; color: rgba(240,235,226,.55) !important; letter-spacing: .08em !important; margin-bottom: 1.5rem; }
.um-dot { color: rgba(255,255,255,.12); }
.um-read-time, [class*="read-time"] { display: none !important; }
.um-eyebrow { display: flex; align-items: center; gap: .9rem; margin-bottom: 2rem; }
.um-eyebrow-line { width: 36px; height: 1px; background: linear-gradient(to right, var(--um-purple), var(--um-gold)); flex-shrink: 0; }
.um-eyebrow span { font-family: var(--fm) !important; font-size: var(--size-label) !important; letter-spacing: .28em !important; text-transform: uppercase !important; color: var(--um-purple) !important; }

/* ============================================================
   9. SECTION HEADS
   ============================================================ */
.um-sec-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 3rem; }
.um-sec-head h2 { font-family: var(--fh) !important; font-size: var(--size-h2) !important; font-weight: 700 !important; color: var(--um-parchment) !important; white-space: nowrap; margin: 0 !important; position: relative; letter-spacing: .02em !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95), 0 0 40px rgba(5,6,15,.8); }
.um-sec-head h2::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 44px; height: 2px; border-radius: 2px; background: var(--um-purple); }
.um-sec-line { flex: 1; height: 1px; background: var(--um-rule); }
.um-sec-tag { font-family: var(--fm) !important; font-size: var(--size-label) !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--um-purple) !important; white-space: nowrap !important; opacity: 1 !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-sec-tag-gold { color: var(--um-gold) !important; }
.um-posts-section .um-sec-head h2::after { background: var(--um-purple); }
.um-posts-section .um-sec-tag { color: var(--um-purple) !important; }
.um-orbit-section .um-sec-head h2::after { background: var(--um-gold); }
.um-orbit-section .um-sec-tag { color: var(--um-gold) !important; }
.um-about-strip .um-sec-head h2::after { background: var(--um-cyan); }
.um-about-strip .um-sec-tag { color: var(--um-cyan) !important; }

/* ============================================================
   10. HERO
   Single column — lotus removed from hero to lotus divider.
   Background set by functions.php.
   overflow: visible required for animation effects.
   ============================================================ */
.um-hero {
  min-height: 82vh !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  padding: 4rem 0 3rem !important;
  position: relative !important;
}
.um-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 3rem 8rem;/* 4rem 3rem*/
  width: 100%;
  /* Single column — right column removed with lotus */
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  overflow: visible;
}
.um-hero-content::before { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(5,6,15,.55) 0%, transparent 100%) !important; pointer-events: none !important; z-index: 0 !important; }
.um-hero-content > * { position: relative !important; z-index: 1 !important; }
.um-eyebrow { justify-content: center; }
.um-hero-actions { justify-content: center; }
.um-hero-sub { margin-left: auto !important; margin-right: auto !important; }
/* Right column removed — hide if it still exists in HTML */
.um-hero-right { display: none !important; }
.um-hero-orb { position: absolute; width: 680px; height: 680px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(124,92,191,.12) 0%, rgba(79,195,195,.05) 40%, transparent 70%); right: -150px; top: 50%; transform: translateY(-50%); animation: um-orb 7s ease-in-out infinite; z-index: 1; }
.um-hero-orb2 { position: absolute; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(212,168,75,.07) 0%, transparent 70%); left: 6%; bottom: 8%; animation: um-orb2 10s ease-in-out infinite; z-index: 1; }
@keyframes um-orb { 0%,100%{transform:translateY(-50%) scale(1);opacity:.7} 50%{transform:translateY(-50%) scale(1.08);opacity:1} }
@keyframes um-orb2 { 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.08);opacity:1} }
.um-hero-title { font-family: var(--fd) !important; font-size: var(--size-hero) !important; font-weight: 700 !important; line-height: 1.08 !important; margin-bottom: 1.6rem !important; color: var(--um-parchment) !important; letter-spacing: -.01em !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95), 0 0 40px rgba(5,6,15,.8) !important; }
.um-hero-title em { color: var(--um-purple) !important; font-style: italic !important; }
.um-gold { color: var(--um-gold) !important; }
.um-hero-sub { font-family: var(--fb) !important; font-style: italic !important; font-size: 1.15rem !important; color: rgba(240,235,226,.82) !important; line-height: 1.75 !important; margin-bottom: 2.8rem !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95) !important; }
.um-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.um-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--um-muted); font-family: var(--fm); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; z-index: 2; animation: um-sf 3s ease-in-out infinite; }
.um-scroll-hint::after { content: ''; display: block; width: 1px; height: 36px; background: linear-gradient(to bottom, rgba(240,235,226,.3), transparent); }
@keyframes um-sf{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}

/* ============================================================
   11. LOTUS FRAME + ORBIT (divider between Journey and About)
   ============================================================ */
.um-lotus-divider { display: flex !important; justify-content: center !important; align-items: center !important; padding: 4rem 0 !important; position: relative !important; z-index: 2 !important; }
.um-lotus-frame { position: relative !important; flex-shrink: 0 !important; width: 480px !important; height: 480px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: -80px !important; }
.um-ring { position: absolute !important; border-radius: 50% !important; top: 50% !important; left: 50% !important; animation: um-lspin linear infinite !important; }
.um-ring:nth-child(1) { width: 480px !important; height: 480px !important; margin-top: -240px !important; margin-left: -240px !important; border: 1px solid rgba(167,139,250,.1) !important; animation-duration: 32s !important; }
.um-ring:nth-child(2) { width: 355px !important; height: 355px !important; margin-top: -178px !important; margin-left: -178px !important; border: 1px solid rgba(212,168,75,.1) !important; animation-duration: 22s !important; animation-direction: reverse !important; }
.um-ring:nth-child(3) { width: 240px !important; height: 240px !important; margin-top: -120px !important; margin-left: -120px !important; border: 1px solid rgba(79,195,195,.08) !important; animation-duration: 16s !important; }
@keyframes um-lspin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.um-lotus-img { position: relative !important; z-index: 2 !important; width: 260px !important; height: 260px !important; border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; flex-shrink: 0 !important; animation: um-lotus-pulse 4s ease-in-out infinite !important; }
.um-lotus-img img { width: 100% !important; height: 100% !important; object-fit: contain !important; border-radius: 0 !important; border: none !important; display: block !important; filter: drop-shadow(0 0 32px rgba(167,139,250,.45)) drop-shadow(0 0 64px rgba(212,168,75,.18)) !important; }
@keyframes um-lotus-pulse { 0%,100%{filter:drop-shadow(0 0 20px rgba(167,139,250,.32)) drop-shadow(0 0 40px rgba(212,168,75,.14))} 50%{filter:drop-shadow(0 0 44px rgba(167,139,250,.58)) drop-shadow(0 0 88px rgba(212,168,75,.26))} }
.um-orbit-dot { position: absolute !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: var(--um-gold) !important; box-shadow: 0 0 14px var(--um-gold), 0 0 28px rgba(212,168,75,.4) !important; top: 50% !important; left: 50% !important; margin-top: -9px !important; margin-left: -9px !important; animation: um-od1 13s linear infinite !important; z-index: 3 !important; }
.um-orbit-dot2 { width: 16px !important; height: 16px !important; margin-top: -8px !important; margin-left: -8px !important; background: var(--um-purple) !important; box-shadow: 0 0 14px var(--um-purple), 0 0 28px rgba(167,139,250,.4) !important; animation: um-od2 19s linear infinite !important; }
@keyframes um-od1 { from{transform:rotate(0deg) translateX(240px) rotate(0deg)} to{transform:rotate(360deg) translateX(240px) rotate(-360deg)} }
@keyframes um-od2 { from{transform:rotate(180deg) translateX(178px) rotate(-180deg)} to{transform:rotate(540deg) translateX(178px) rotate(-540deg)} }

/* ============================================================
   12. SECTION CARDS
   ============================================================ */
.um-section-cards { max-width: 1380px; margin: 0 auto; padding: 2rem 3rem 5rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.um-scard { position: relative; border-radius: 10px; overflow: hidden; padding: 2.5rem 2rem; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .3s, box-shadow .3s; text-decoration: none !important; background-color: #05060f !important; background-image: url('https://unfolding-me.com/wp-content/uploads/2026/03/file_000000003db8722fa160c19c875b20311-1.png') !important; background-size: cover !important; background-position: center !important; }
.um-scard:nth-child(1){border:5px solid rgba(167,139,250,.12)} .um-scard:nth-child(1):hover{box-shadow:var(--s3),var(--glow);border-color:rgba(167,139,250,.3);transform:translateY(-10px)}
.um-scard:nth-child(2){border:5px solid rgba(212,168,75,.12)} .um-scard:nth-child(2):hover{box-shadow:var(--s3),var(--glow-gold);border-color:rgba(212,168,75,.3);transform:translateY(-10px)}
.um-scard:nth-child(3){border:5px solid rgba(79,195,195,.12)} .um-scard:nth-child(3):hover{box-shadow:var(--s3),var(--glow-cyan);border-color:rgba(79,195,195,.3);transform:translateY(-10px)}
.um-scard-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,6,15,.97) 0%, rgba(5,6,15,.72) 45%, rgba(5,6,15,.42) 100%); }
.um-scard-content { position: relative; z-index: 2; }
.um-scard-tag { font-family: var(--fm); font-size: var(--size-label); letter-spacing: .22em; text-transform: uppercase; color: var(--um-purple); margin-bottom: .8rem; display: block; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-tag-gold{color:var(--um-gold)!important} .um-tag-cyan{color:var(--um-cyan)!important}
.um-scard h3 { font-family: var(--fh); font-size: 1.7rem; font-weight: 700; color: var(--um-parchment); line-height: 1.2; margin-bottom: .6rem; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95), 0 0 40px rgba(5,6,15,.8); }
.um-scard p { font-family: var(--fb); font-size: 1rem; color: rgba(240,235,226,.82); line-height: 1.65; margin-bottom: 1.2rem; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-scard-cta { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--um-purple); font-weight: 500; }
.um-scard-cta::after{content:'→'}
.um-cta-gold{color:var(--um-gold)!important} .um-cta-cyan{color:var(--um-cyan)!important}

/* ============================================================
   13. JOURNEY POSTS
   ============================================================ */
.um-posts-section { max-width: 1380px; margin: 0 auto; padding: 2rem 3rem 5rem; }
.um-featured-post { display: grid; grid-template-columns: 1fr 1fr; border-radius: 10px; overflow: hidden; border: 5px solid rgba(167,139,250,.12); background: linear-gradient(135deg, rgba(124,92,191,.10) 0%, rgba(5,6,15,.82) 50%, rgba(212,168,75,.06) 100%); backdrop-filter: blur(16px); margin-bottom: 3rem; box-shadow: var(--s2); transition: all .3s; }
.um-featured-post:hover { box-shadow: var(--s3),var(--glow); border-color: rgba(167,139,250,.25); }
.um-fp-img { position: relative; min-height: 400px; overflow: hidden; background: linear-gradient(145deg,#0a0b1e,#140e22); }
.um-fp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .65; transition: opacity .4s; }
.um-featured-post:hover .um-fp-img img{opacity:.82}
.um-fp-overlay { position: absolute; inset: 0; background: linear-gradient(to right, transparent 50%, rgba(5,6,15,.55) 100%); }
.um-fp-body { padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.um-fp-body .um-badge { display: none !important; }
.um-fp-body > p:not(.um-fp-excerpt):not(.um-post-meta) { display: none !important; }
.um-fp-body h2 { font-family: var(--fh) !important; font-size: clamp(1.5rem,2.5vw,2rem) !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--um-parchment) !important; margin-bottom: 1rem !important; margin-top: 0 !important; letter-spacing: .01em !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-fp-body h2 a { color: var(--um-parchment) !important; text-decoration: none !important; }
.um-fp-body h2 a:hover { color: var(--um-purple) !important; }
.um-fp-excerpt { font-family: var(--fb); font-style: italic; font-size: 1.05rem; color: rgba(240,235,226,.78); line-height: 1.65; margin-bottom: 1.5rem; }
.um-post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.um-post-card { border-radius: 10px; overflow: hidden; border: 5px solid rgba(167,139,250,.1); background: linear-gradient(145deg, rgba(124,92,191,.12) 0%, rgba(5,6,15,.80) 45%, rgba(212,168,75,.06) 100%); backdrop-filter: blur(12px); display: flex; flex-direction: column; transition: all .35s; position: relative; box-shadow: 0 4px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); }
.um-post-card:hover { transform: translateY(-5px) !important; border-color: rgba(167,139,250,.25) !important; box-shadow: var(--s3), var(--glow), inset 0 1px 0 rgba(255,255,255,.07) !important; background: linear-gradient(145deg, rgba(124,92,191,.20) 0%, rgba(5,6,15,.75) 45%, rgba(212,168,75,.10) 100%) !important; }
.um-post-card .um-badge { display: none !important; }
.um-pc-img { height: 210px; overflow: hidden; background: linear-gradient(145deg,#0a0b1e,#140e22); position: relative; }
.um-pc-img img { width: 100%; height: 100%; object-fit: cover; opacity: .68; transition: all .4s; display: block; }
.um-post-card:hover .um-pc-img img { opacity: .88; transform: scale(1.04); }
.um-pc-tag { position: absolute; top: .9rem; left: .9rem; font-family: var(--fm); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; padding: .25rem .75rem; background: rgba(5,6,15,.75); border: 1px solid rgba(167,139,250,.3); backdrop-filter: blur(8px); border-radius: 99px; color: var(--um-purple); }
.um-pc-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.um-pc-body h3 { font-family: var(--fh) !important; font-size: var(--size-h3) !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--um-parchment) !important; margin-bottom: .7rem !important; margin-top: 0 !important; letter-spacing: .01em !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-pc-body h3 a { color: var(--um-parchment) !important; text-decoration: none !important; }
.um-pc-body h3 a:hover { color: var(--um-purple) !important; }
.um-pc-body p { font-family: var(--fb) !important; font-size: var(--size-small) !important; color: rgba(240,235,226,.78) !important; flex: 1; line-height: 1.7 !important; }
.um-pc-footer { padding: .9rem 1.5rem; border-top: 1px solid var(--um-rule); display: flex; justify-content: space-between; align-items: center; }

/* ============================================================
   14. ABOUT STRIP
   ============================================================ */
.um-about-strip { max-width: 1380px; margin: 0 auto; padding: 2rem 3rem 5rem; }
.um-about-glass { border-radius: 12px; padding: 3.5rem; background: linear-gradient(135deg, rgba(79,195,195,.08) 0%, rgba(5,6,15,.75) 50%, rgba(167,139,250,.05) 100%); backdrop-filter: blur(20px); border: 5px solid rgba(79,195,195,.22) !important; box-shadow: 0 0 40px rgba(79,195,195,.12), 0 8px 40px rgba(0,0,0,.4) !important; display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: center; position: relative; overflow: hidden; }
.um-about-glass::before { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(79,195,195,.07) 0%, transparent 70%); pointer-events: none; }
.um-about-portrait { width: 165px; height: 165px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(79,195,195,.22); box-shadow: 0 0 40px rgba(79,195,195,.14); }
.um-about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.um-about-eyebrow { font-family: var(--fm) !important; font-size: var(--size-label) !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--um-cyan) !important; display: block !important; margin-bottom: 1rem !important; text-shadow: 0 0 20px rgba(79,195,195,.4) !important; opacity: 1 !important; }
.um-about-eyebrow em { color: var(--um-purple) !important; font-style: normal !important; }
.um-about-text h2 { font-family: var(--fh) !important; font-size: 2.2rem !important; font-weight: 700 !important; color: var(--um-parchment) !important; margin-bottom: .8rem !important; margin-top: 0 !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-about-text blockquote { background: transparent !important; border: none !important; border-left: 2px solid var(--um-cyan) !important; padding: .6rem 0 .6rem 1.2rem !important; box-shadow: none !important; backdrop-filter: none !important; max-width: 100% !important; }
.um-about-text blockquote p { font-family: var(--fq) !important; font-style: normal !important; font-size: 1.15rem !important; color: rgba(240,235,226,.85) !important; margin: 0 !important; line-height: 1.7 !important; }
.um-about-text blockquote::before { display: none !important; }
.um-about-text p { font-family: var(--fb) !important; font-size: 1rem; color: rgba(240,235,226,.88) !important; line-height: 1.8; max-width: 100% !important; }

/* ============================================================
   15. UNIVERSE / ORBIT
   ============================================================ */
.um-orbit-section { max-width: 1380px; margin: 0 auto; padding: 2rem 3rem 5rem; }
.um-orbit-sub-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; margin-top: 1rem; }
.um-orbit-sub-head h3 { font-family: var(--fh) !important; font-size: 1.4rem !important; font-weight: 700 !important; color: var(--um-parchment) !important; white-space: nowrap; margin: 0 !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-orbit-sub-head::after { content: ''; flex: 1; height: 1px; background: rgba(212,168,75,.15); }
.um-orbit-sub-label { font-family: var(--fm); font-size: var(--size-label); letter-spacing: .22em; text-transform: uppercase; opacity: 1 !important; white-space: nowrap; color: var(--um-gold) !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-horoscope-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 3.5rem; }
.um-horoscope-card { border-radius: 10px; overflow: hidden; border: 4px solid rgba(212,168,75,.14); background: linear-gradient(145deg, rgba(212,168,75,.08) 0%, rgba(5,6,15,.80) 50%, rgba(124,92,191,.05) 100%); backdrop-filter: blur(12px); display: flex; flex-direction: column; transition: all .3s; box-shadow: 0 4px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); }
.um-horoscope-card:hover { transform: translateY(-4px); border-color: rgba(212,168,75,.28); box-shadow: var(--s3),var(--glow-gold); }
.um-hc-img { height: 150px; overflow: hidden; position: relative; background: linear-gradient(145deg,#0d0a1e,#1a1208); }
.um-hc-img img { width: 100%; height: 100%; object-fit: cover; opacity: .7; display: block; transition: all .4s; }
.um-horoscope-card:hover .um-hc-img img { opacity: .9; transform: scale(1.05); }
.um-hc-sign { position: absolute; top: .7rem; left: .7rem; font-family: var(--fm); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; padding: .22rem .65rem; background: rgba(5,6,15,.75); border: 1px solid rgba(212,168,75,.3); border-radius: 99px; color: var(--um-gold); }
.um-hc-body { padding: 1rem; flex: 1; }
.um-hc-body h4 { font-family: var(--fh) !important; font-size: 1.05rem !important; font-weight: 700 !important; color: var(--um-parchment) !important; margin-bottom: .3rem !important; margin-top: 0 !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-hc-body p { font-family: var(--fb) !important; font-size: .9rem; color: rgba(240,235,226,.72); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.um-hc-footer { padding: .65rem 1rem; border-top: 1px solid rgba(212,168,75,.08); display: flex; justify-content: flex-end; }
.um-orbit-deep-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.um-orbit-deep-card { border-radius: 10px; overflow: hidden; border: 4px solid rgba(212,168,75,.1); background: linear-gradient(145deg, rgba(212,168,75,.07) 0%, rgba(5,6,15,.80) 50%, rgba(167,139,250,.05) 100%); backdrop-filter: blur(14px); display: flex; flex-direction: column; transition: all .3s; }
.um-orbit-deep-card:hover { transform: translateY(-5px); box-shadow: var(--s3),var(--glow-gold); border-color: rgba(212,168,75,.25); }
.um-odc-img { height: 200px; overflow: hidden; position: relative; background: linear-gradient(145deg,#0d0a1e,#1a1208); }
.um-odc-img img { width: 100%; height: 100%; object-fit: cover; opacity: .65; display: block; transition: all .4s; }
.um-orbit-deep-card:hover .um-odc-img img { opacity: .85; transform: scale(1.04); }
.um-odc-tag { position: absolute; top: .9rem; left: .9rem; font-family: var(--fm); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; padding: .25rem .75rem; background: rgba(5,6,15,.75); border: 1px solid rgba(212,168,75,.3); backdrop-filter: blur(8px); border-radius: 99px; color: var(--um-gold); }
.um-odc-body { padding: 1.5rem; flex: 1; }
.um-odc-body h3 { font-family: var(--fh) !important; font-size: var(--size-h3) !important; font-weight: 700 !important; color: var(--um-parchment) !important; margin-bottom: .5rem !important; margin-top: 0 !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-odc-body h3 a { color: var(--um-parchment) !important; text-decoration: none !important; }
.um-odc-body h3 a:hover { color: var(--um-gold) !important; }
.um-odc-body p { font-family: var(--fb) !important; font-size: var(--size-small); color: rgba(240,235,226,.78); line-height: 1.65; }
.um-odc-footer { padding: .9rem 1.5rem; border-top: 1px solid rgba(212,168,75,.08); }

/* ============================================================
   16. SINGLE POST
   ============================================================ */
.um-post-hero { padding: 5rem 2rem 4rem; text-align: center; position: relative; overflow: hidden; }
.um-post-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 110%, rgba(124,92,191,.18) 0%, transparent 60%); }
.um-post-hero-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.um-post-hero h1 { font-family: var(--fh) !important; font-size: var(--size-h1) !important; font-weight: 700 !important; color: var(--um-parchment) !important; line-height: 1.15 !important; margin-bottom: 1.2rem !important; letter-spacing: .01em !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95), 0 0 40px rgba(5,6,15,.8); }
.um-article-layout { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem 6rem; display: block !important; }
.um-article-main { width: 100%; position: relative; z-index: 2; background: rgba(5,6,15,.52); backdrop-filter: blur(4px); border-radius: 12px; padding: 3.5rem 4rem; border: 1px solid rgba(255,255,255,.06); }
.um-article-sidebar { display: none !important; }
.um-post-featured-img { border-radius: 10px; overflow: hidden; margin-bottom: 3rem; max-height: 520px; position: relative; }
.um-post-featured-img img { width: 100%; object-fit: cover; display: block; opacity: .78; }
.um-post-featured-img::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, rgba(5,6,15,.88)); }
.entry-content { font-family: var(--fb) !important; font-size: var(--size-body) !important; color: rgba(240,235,226,.90) !important; line-height: 1.9 !important; min-width: 0; overflow-wrap: break-word; word-break: normal; }
.entry-content > p:first-of-type::first-letter { font-family: var(--fd) !important; font-size: 4.5rem !important; line-height: .8 !important; float: left !important; margin-right: .1em !important; margin-top: .06em !important; color: var(--um-purple) !important; font-weight: 700 !important; }
.entry-content h2 { font-family: var(--fh) !important; font-size: 1.8rem !important; font-weight: 700 !important; margin: 3.5rem 0 1.1rem !important; color: var(--um-parchment) !important; letter-spacing: .01em !important; }
.entry-content h3 { font-family: var(--fh) !important; font-size: 1.3rem !important; font-weight: 700 !important; color: var(--um-parchment) !important; margin: 3rem 0 .7rem !important; letter-spacing: .01em !important; }
.entry-content a { color: var(--um-purple) !important; border-bottom: 1px solid rgba(167,139,250,.3); transition: border-color .2s; text-decoration: none !important; }
.entry-content em { color: var(--um-purple); }
.entry-content strong { color: var(--um-parchment); font-weight: 600; }
.entry-content p { margin-bottom: 1.7rem !important; overflow-wrap: break-word; word-break: normal; }
.entry-content img { max-width: 100% !important; height: auto !important; }
/* Pull quotes */
.entry-content blockquote, .wp-block-quote { position: relative !important; margin: 3rem 2rem !important; padding: 2rem 2.5rem !important; background: transparent !important; border: none !important; border-top: 1px solid rgba(167,139,250,.2) !important; border-bottom: 1px solid rgba(167,139,250,.2) !important; box-shadow: none !important; backdrop-filter: none !important; text-align: center !important; }
.entry-content blockquote::before, .wp-block-quote::before { content: '✦' !important; display: block !important; font-size: 1.2rem !important; color: var(--um-purple) !important; opacity: .6 !important; margin-bottom: 1rem !important; letter-spacing: .5em !important; position: relative !important; top: auto !important; left: auto !important; line-height: 1 !important; }
.entry-content blockquote::after, .wp-block-quote::after { content: '✦' !important; display: block !important; font-size: 1.2rem !important; color: var(--um-purple) !important; opacity: .6 !important; margin-top: 1rem !important; letter-spacing: .5em !important; line-height: 1 !important; }
.entry-content blockquote p, .wp-block-quote p { font-family: var(--fq) !important; font-style: normal !important; font-size: 1.5rem !important; line-height: 1.7 !important; color: var(--um-parchment) !important; margin: 0 !important; word-break: normal !important; overflow-wrap: break-word !important; text-shadow: 0 0 30px rgba(167,139,250,.25) !important; letter-spacing: .01em !important; }
/* About strip blockquote override */
.um-about-text blockquote { background: transparent !important; border: none !important; border-left: 2px solid var(--um-cyan) !important; padding: .6rem 0 .6rem 1.2rem !important; box-shadow: none !important; backdrop-filter: none !important; text-align: left !important; }
.um-about-text blockquote::before, .um-about-text blockquote::after { display: none !important; }
/* Separators */
.entry-content hr, .wp-block-separator { border: none !important; background: none !important; height: auto !important; margin: 3.5rem auto !important; text-align: center !important; overflow: visible !important; position: relative !important; }
.entry-content hr::before, .wp-block-separator::before { content: '— ✦ —' !important; display: block !important; font-family: var(--fm) !important; font-size: .75rem !important; letter-spacing: .5em !important; color: var(--um-purple) !important; opacity: .7 !important; text-align: center !important; position: relative !important; top: auto !important; left: auto !important; }
.um-separator { display: flex !important; align-items: center !important; gap: 1.5rem !important; margin: 3.5rem 0 !important; }
.um-separator::before, .um-separator::after { content: '' !important; flex: 1 !important; height: 1px !important; background: linear-gradient(to var(--dir, right), transparent, rgba(167,139,250,.3), transparent) !important; }
.um-separator::before { --dir: right; } .um-separator::after { --dir: left; }
.um-separator-symbol { font-family: var(--fm) !important; font-size: .7rem !important; color: var(--um-purple) !important; letter-spacing: .3em !important; opacity: .8 !important; white-space: nowrap !important; }
.um-ornament { text-align: center !important; margin: 3.5rem 0 !important; font-family: var(--fm) !important; font-size: .75rem !important; letter-spacing: .5em !important; color: var(--um-purple) !important; opacity: .7 !important; display: block !important; }
.um-callout { background: rgba(255,255,255,.04); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 1.5rem 1.8rem; margin: 2.2rem 0; }
.um-callout-label { font-family: var(--fm); font-size: .62rem; letter-spacing: .25em; text-transform: uppercase; color: var(--um-cyan); margin-bottom: .7rem; display: block; }
.um-closing { margin-top: 4rem; padding: 2.5rem; border-radius: 10px; background: rgba(255,255,255,.04); backdrop-filter: blur(16px); border: 1px solid rgba(167,139,250,.1); }
.um-closing-label { font-family: var(--fm); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--um-purple); margin-bottom: 1rem; opacity: .8; display: block; }
.um-closing p { font-family: var(--fd) !important; font-style: italic !important; font-size: 1.05rem !important; line-height: 1.8 !important; color: var(--um-muted) !important; }
.post-tags, .tags-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--um-rule); }
.post-tags a, .tags-links a, .ptag { padding: .3rem 1rem; border-radius: 99px; font-size: .7rem; border: 1px solid var(--um-rule); color: var(--um-muted); background: rgba(255,255,255,.04); transition: all .2s; text-decoration: none; }
.post-tags a:hover, .ptag:hover { background: rgba(124,92,191,.2); border-color: rgba(167,139,250,.3); color: var(--um-purple); }
.author-box { display: flex; gap: 1.5rem; margin-top: 3.5rem; padding: 2rem; border-radius: 10px; background: rgba(5,6,15,.65); border: 1px solid rgba(167,139,250,.22); box-shadow: 0 0 30px rgba(167,139,250,.08), 0 4px 24px rgba(0,0,0,.4); }
.auth-av { width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(167,139,250,.25); box-shadow: 0 0 20px rgba(167,139,250,.15); }
.auth-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-info h4 { font-family: var(--fh); font-size: 1.25rem; color: var(--um-parchment); margin-bottom: .3rem; margin-top: 0; }
.auth-info p { font-family: var(--fb); font-size: .95rem; color: rgba(240,235,226,.75); line-height: 1.65; }
/* Post navigation */
.post-navigation { max-width: 1100px; margin: 0 auto; padding: 0 2rem 5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.nav-previous, .nav-next { background: rgba(5,6,15,.65); border: 1px solid rgba(167,139,250,.15); backdrop-filter: blur(16px); border-radius: 10px; padding: 1.8rem; transition: all .3s; }
.nav-previous:hover, .nav-next:hover { box-shadow: var(--glow); border-color: rgba(167,139,250,.3); }
.nav-next { text-align: right; }
.nav-subtitle { font-family: var(--fm); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; color: var(--um-purple); margin-bottom: .6rem; opacity: .8; display: block; }
.nav-previous a, .nav-next a { font-family: var(--fh); font-size: 1.05rem; line-height: 1.35; color: var(--um-parchment); text-decoration: none; }
.nav-previous a:hover, .nav-next a:hover { color: var(--um-purple); }
/* Sidebar */
.wg { background: rgba(5,6,15,.78); backdrop-filter: blur(20px); border: 1px solid rgba(167,139,250,.2); border-radius: 10px; padding: 1.6rem; margin-bottom: 1.5rem; }
.wt { font-family: var(--fm); font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; color: var(--um-purple); margin-bottom: 1.3rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(167,139,250,.15); display: block; }
.um-toc-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.um-toc-item { padding: .45rem 0; border-bottom: 1px solid var(--um-rule); font-size: .9rem; }
.um-toc-item:last-child { border-bottom: none; }
.um-toc-item a { color: rgba(240,235,226,.72); display: flex; align-items: center; gap: .5rem; transition: color .2s; text-decoration: none; }
.um-toc-item a:hover, .um-toc-item a.um-active { color: var(--um-purple); }
.um-toc-num { font-family: var(--fm); font-size: .56rem; color: var(--um-purple); opacity: .7; min-width: 18px; }
.um-sidebar-post { display: flex; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid var(--um-rule); }
.um-sidebar-post:last-child { border-bottom: none; }
.um-sidebar-thumb { width: 52px; height: 52px; border-radius: 4px; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(167,139,250,.1); }
.um-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .7; display: block; }
.um-sidebar-info h5 { font-family: var(--fh); font-size: .95rem; color: var(--um-parchment); margin: 0 0 .2rem; line-height: 1.3; }
.um-sidebar-info h5 a { color: var(--um-parchment); text-decoration: none; }
.um-sidebar-info h5 a:hover { color: var(--um-purple); }

/* ============================================================
   17. ABOUT PAGE
   ============================================================ */
.um-about-hero { min-height: 90vh; display: flex; align-items: center; padding: 5rem 3rem 4rem; position: relative; overflow: hidden; }
.um-about-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 20% 50%, rgba(79,195,195,.10) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 80% 80%, rgba(167,139,250,.08) 0%, transparent 55%); }
.um-about-hero-inner { max-width: 1380px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; position: relative; z-index: 2; }
.um-about-h1 { font-family: var(--fh) !important; font-size: clamp(2.8rem,5vw,4.5rem) !important; font-weight: 700 !important; line-height: 1.1 !important; color: var(--um-parchment) !important; margin: 1.5rem 0 !important; letter-spacing: .01em !important; text-shadow: 0 0 20px rgba(5,6,15,.95), 0 2px 12px rgba(5,6,15,1), 0 0 40px rgba(5,6,15,.9); }
.um-about-h1 em { color: var(--um-cyan) !important; font-style: italic !important; }
.um-about-hero-lead { font-family: var(--fb); font-style: italic; font-size: 1.2rem; color: rgba(240,235,226,.72); line-height: 1.75; margin-bottom: 2.5rem; text-shadow: 0 0 20px rgba(5,6,15,.95), 0 2px 12px rgba(5,6,15,1); }
.um-about-portrait-frame { position: relative; width: 380px; height: 480px; }
.um-about-main-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 0 60px rgba(79,195,195,.12), 0 20px 60px rgba(0,0,0,.5); border: none; }
.um-about-portrait-ring { position: absolute; border-radius: 50%; animation: um-lspin 25s linear infinite; pointer-events: none; }
.um-about-portrait-ring-1 { width: 110%; height: 110%; top: -5%; left: -5%; border: 1px solid rgba(79,195,195,.08); animation-duration: 30s; }
.um-about-portrait-ring-2 { width: 125%; height: 125%; top: -12.5%; left: -12.5%; border: 1px solid rgba(212,168,75,.05); animation-duration: 20s; animation-direction: reverse; }
.um-about-badge-float { display: none !important; }
.um-section-divider { display: flex; align-items: center; gap: 1.5rem; max-width: 1380px; margin: 0 auto; padding: 2.5rem 3rem; }
.um-divider-line { flex: 1; height: 1px; background: rgba(255,255,255,.07); }
.um-divider-symbol { color: var(--um-cyan); opacity: .5; font-size: 1rem; flex-shrink: 0; }
.um-about-content-section { padding: 3rem 3rem 4rem; }
.um-about-content-inner { max-width: 1380px; margin: 0 auto; }
.um-about-block { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 4rem; }
.um-about-block-right .um-about-block-img { order: 2; }
.um-about-block-right .um-about-block-text { order: 1; }
.um-about-section-tag { font-family: var(--fm); font-size: var(--size-label); letter-spacing: .28em; text-transform: uppercase; display: block; margin-bottom: 1rem; color: var(--um-cyan); opacity: 1 !important; }
.um-about-block-text { background: rgba(5,6,15,.35) !important; backdrop-filter: blur(4px) !important; border-radius: 12px !important; padding: 2rem 2.5rem !important; border: 1px solid rgba(255,255,255,.05) !important; }
.um-about-block-text h2 { font-family: var(--fh) !important; font-size: clamp(1.5rem,2.5vw,2rem) !important; font-weight: 700 !important; color: var(--um-parchment) !important; line-height: 1.2 !important; margin-bottom: 1.2rem !important; margin-top: 0 !important; text-shadow: 0 0 20px rgba(5,6,15,.95), 0 2px 10px rgba(5,6,15,1); }
.um-about-block-text p { font-family: var(--fb) !important; font-size: 1.05rem; color: rgba(240,235,226,.82); line-height: 1.85; margin-bottom: 1.2rem; text-shadow: 0 0 20px rgba(5,6,15,.95), 0 2px 10px rgba(5,6,15,1); }
.um-about-photo-2 { width: 100%; border-radius: 10px; display: block; box-shadow: 0 0 50px rgba(79,195,195,.1), var(--s3); max-height: 480px; object-fit: cover; border: none; }
.um-about-site-section { padding: 4rem 3rem 5rem; background: rgba(5,6,15,.62); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); }
.um-about-site-inner { max-width: 1380px; margin: 0 auto; }
.um-about-site-header { text-align: center; margin-bottom: 3.5rem; }
.um-about-site-header h2 { font-family: var(--fh) !important; font-size: clamp(2rem,3.5vw,2.8rem) !important; font-weight: 700 !important; color: var(--um-parchment) !important; margin: .8rem 0 !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-about-site-lead { font-family: var(--fb); font-style: italic; font-size: 1.15rem; color: rgba(240,235,226,.62); max-width: 500px; margin: 0 auto; }
.um-about-three-cols { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; max-width: 860px; margin: 0 auto; }
.um-about-col { padding: 2.5rem; border-radius: 12px; background-image: url('https://unfolding-me.com/wp-content/uploads/2026/04/TUM_blocksy_bg12.png'); background-size: cover; background-position: center; position: relative; overflow: hidden; transition: all .3s; }
.um-about-col::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,6,15,.95) 0%, rgba(5,6,15,.72) 50%, rgba(5,6,15,.45) 100%); z-index: 0; }
.um-about-col > * { position: relative; z-index: 1; }
.um-about-col:hover { transform: translateY(-4px); }
.um-about-col-purple { border: 1px solid rgba(167,139,250,.18); }
.um-about-col-purple:hover { box-shadow: var(--s3),var(--glow); border-color: rgba(167,139,250,.35); }
.um-about-col-gold { border: 1px solid rgba(212,168,75,.18); }
.um-about-col-gold:hover { box-shadow: var(--s3),var(--glow-gold); border-color: rgba(212,168,75,.35); }
.um-about-col h3 { font-family: var(--fh) !important; font-size: 1.65rem !important; font-weight: 700 !important; margin-bottom: .8rem !important; margin-top: 0 !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-about-col-purple h3 { color: var(--um-purple) !important; }
.um-about-col-gold h3 { color: var(--um-gold) !important; }
.um-about-col p { font-family: var(--fb); font-size: .95rem; color: rgba(240,235,226,.82); line-height: 1.75; }
.um-about-closing { padding: 6rem 3rem; text-align: center; position: relative; }
.um-about-closing::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(79,195,195,.07) 0%, transparent 60%); }
.um-about-closing-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.um-about-lotus-center { width: 120px; height: 120px; border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; margin: 0 auto 2.5rem; animation: um-lotus-pulse 4s ease-in-out infinite; }
.um-about-lotus-center img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 20px rgba(79,195,195,.4)); border-radius: 0 !important; }
.um-about-big-quote { font-family: var(--fq); font-size: clamp(1.3rem,2.5vw,1.8rem); color: rgba(240,235,226,.88); line-height: 1.6; border: none !important; padding: 0 !important; background: none !important; margin-bottom: 1rem; text-shadow: 0 0 20px rgba(5,6,15,.95), 0 2px 10px rgba(5,6,15,1); }
.um-about-big-quote::before { display: none !important; }
.um-about-closing-sub { font-family: var(--fm); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--um-cyan); text-shadow: 0 0 20px rgba(5,6,15,.95); }

/* ============================================================
   18. COSMIC EFFECTS
   ============================================================ */
.um-nebula-blob { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(80px); opacity: .07; animation: um-blob-drift 20s ease-in-out infinite alternate; }
.um-nebula-blob-1 { width: 800px; height: 800px; background: var(--um-purple); top: -200px; left: -200px; animation-duration: 25s; }
.um-nebula-blob-2 { width: 700px; height: 700px; background: var(--um-gold); bottom: -200px; right: -100px; animation-duration: 30s; animation-direction: alternate-reverse; }
.um-nebula-blob-3 { width: 400px; height: 400px; background: var(--um-cyan); top: 40%; left: 40%; animation-duration: 22s; }
@keyframes um-blob-drift { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.05)} 66%{transform:translate(-20px,40px) scale(.95)} 100%{transform:translate(30px,20px) scale(1.08)} }
.um-particle { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; animation: um-float-particle linear infinite; }
@keyframes um-float-particle { 0%{transform:translateY(100vh) scale(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-100px) scale(1);opacity:0} }
.um-constellation { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .07; background-image: linear-gradient(rgba(167,139,250,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(167,139,250,.3) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); }

/* ============================================================
   19. PAGINATION
   ============================================================ */
.pagination { display: flex; justify-content: center; gap: .5rem; padding: 2rem 0 4rem; }
.page-numbers a, .page-numbers span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--um-rule); border-radius: 4px; font-size: .88rem; color: var(--um-muted); background: rgba(255,255,255,.04); transition: all .2s; text-decoration: none; }
.page-numbers a:hover, .page-numbers .current { background: rgba(124,92,191,.28); border-color: rgba(167,139,250,.3); color: var(--um-parchment); }

/* ============================================================
   20. ARCHIVE PAGES
   ============================================================ */
.um-archive-header { padding: 6rem 3rem 4rem; text-align: center; position: relative; overflow: hidden; }
.um-archive-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 110%, rgba(124,92,191,.18) 0%, transparent 60%); }
.um-archive-header-inner { position: relative; z-index: 2; max-width: 1380px; margin: 0 auto; }
.um-archive-title { font-family: var(--fh) !important; font-size: clamp(2.4rem,5vw,4rem) !important; font-weight: 700 !important; color: var(--um-parchment) !important; margin: 1rem 0 !important; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95), 0 0 40px rgba(5,6,15,.8) !important; }
.um-archive-desc { font-family: var(--fb); font-style: italic; font-size: 1.1rem; color: var(--um-muted); max-width: 560px; margin: 0 auto; line-height: 1.75; text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95); }
.um-archive-header .um-eyebrow span { text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95) !important; }
.um-archive-body { max-width: 1380px; margin: 0 auto; padding: 2rem 3rem 6rem; box-sizing: border-box; }
.um-archive-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 1.5rem !important; }
.um-archive-pagination { text-align: center; padding: 3rem 0 0; }
.um-archive-pagination .nav-links { display: flex !important; justify-content: center !important; gap: .5rem !important; grid-template-columns: none !important; padding: 0 !important; max-width: none !important; }
.um-archive-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; border: 1px solid var(--um-rule); border-radius: 4px; color: var(--um-muted); background: var(--um-glass); text-decoration: none; font-family: var(--fm); font-size: .72rem; transition: all .2s; }
.um-archive-pagination .page-numbers:hover, .um-archive-pagination .page-numbers.current { background: rgba(124,92,191,.28); border-color: rgba(167,139,250,.3); color: var(--um-parchment); }
.um-archive-empty { text-align: center; padding: 6rem 0; color: var(--um-muted); font-family: var(--fb); font-size: 1.1rem; }

/* ============================================================
   21. HERO ANIMATION EFFECTS
   All effects use nth-of-type to avoid nth-child counting
   issues when multiple element types share the same parent.

   ORDER IN front-page.php inside .um-hero:
   div.um-lotus-wave-container (contains 4 x div.um-wave-ring)
   div.um-star-twinkle x2
   div.um-lotus-reflection
   div.um-hero-particle x5
   div.um-shooting-star x6
   div.um-hero-orb
   div.um-hero-orb2
   div.um-hero-content
   ============================================================ */

/* ── Twinkling geometric stars ── */
.um-star-twinkle { position: absolute !important; border-radius: 50% !important; pointer-events: none !important; z-index: 10 !important; animation: um-star-twinkle ease-in-out infinite !important; }
.um-star-twinkle-left  { width: 90px !important; height: 90px !important; left: 4% !important; top: 40% !important; background: radial-gradient(circle, rgba(255,220,150,.55) 0%, rgba(212,168,75,.25) 35%, rgba(167,139,250,.12) 65%, transparent 100%) !important; animation-duration: 3.2s !important; animation-delay: 0s !important; }
.um-star-twinkle-right { width: 80px !important; height: 80px !important; right: 5% !important; top: 33% !important; background: radial-gradient(circle, rgba(255,220,150,.5) 0%, rgba(212,168,75,.22) 35%, rgba(167,139,250,.10) 65%, transparent 100%) !important; animation-duration: 2.8s !important; animation-delay: 1.4s !important; }
@keyframes um-star-twinkle { 0%{opacity:.3;transform:scale(.85)} 25%{opacity:1;transform:scale(1.12)} 50%{opacity:.5;transform:scale(.92)} 75%{opacity:.9;transform:scale(1.06)} 100%{opacity:.3;transform:scale(.85)} }

/* ── Lotus wave — rings radiate outward from lotus center ── */
/* Container anchored to lotus position in image */
.um-lotus-wave-container { position: absolute !important; left: 50% !important; top: 78% !important; transform: translate(-50%,-50%) !important; width: 0 !important; height: 0 !important; pointer-events: none !important; z-index: 10 !important; display: block !important; }
/* Wave rings — nth-child correct here as only children of container */
.um-wave-ring { position: absolute !important; border-radius: 50% !important; transform: translate(-50%,-50%) !important; pointer-events: none !important; animation: um-wave-expand linear infinite !important; display: block !important; }
.um-wave-ring:nth-child(1) { width: 100px !important; height: 60px !important; border: 1.5px solid rgba(212,168,75,.8) !important; box-shadow: 0 0 12px rgba(212,168,75,.4) !important; animation-duration: 5s !important; animation-delay: 0s !important; opacity: 0; }
.um-wave-ring:nth-child(2) { width: 100px !important; height: 60px !important; border: 1.5px solid rgba(167,139,250,.7) !important; box-shadow: 0 0 12px rgba(167,139,250,.3) !important; animation-duration: 5s !important; animation-delay: 1.25s !important; opacity: 0; }
.um-wave-ring:nth-child(3) { width: 100px !important; height: 60px !important; border: 1.5px solid rgba(212,168,75,.6) !important; box-shadow: 0 0 10px rgba(212,168,75,.25) !important; animation-duration: 5s !important; animation-delay: 2.5s !important; opacity: 0; }
.um-wave-ring:nth-child(4) { width: 100px !important; height: 60px !important; border: 1.5px solid rgba(255,255,255,.4) !important; animation-duration: 5s !important; animation-delay: 3.75s !important; opacity: 0; }
@keyframes um-wave-expand { 0%{transform:translate(-50%,-50%) scale(.3);opacity:.9} 30%{opacity:.6} 70%{opacity:.2} 100%{transform:translate(-50%,-50%) scale(18);opacity:0} }

/* ── Lotus water reflection ── */
.um-lotus-reflection { position: absolute !important; left: 50% !important; top: 86% !important; transform: translateX(-50%) !important; width: 480px !important; height: 100px !important; pointer-events: none !important; z-index: 10 !important; display: block !important; background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(212,168,75,.22) 0%, rgba(167,139,250,.15) 40%, rgba(5,6,15,.35) 70%, transparent 100%) !important; animation: um-reflection-shimmer 4s ease-in-out infinite alternate !important; filter: blur(3px) !important; }
.um-lotus-reflection::after { content: '' !important; position: absolute !important; top: 15% !important; left: 30% !important; width: 40% !important; height: 1px !important; background: linear-gradient(to right, transparent, rgba(212,168,75,.5), transparent) !important; animation: um-gold-shimmer 3s ease-in-out infinite alternate !important; }
@keyframes um-reflection-shimmer { 0%{opacity:.4;transform:translateX(-50%) scaleY(.8)} 100%{opacity:.8;transform:translateX(-50%) scaleY(1.15)} }
@keyframes um-gold-shimmer { 0%{opacity:.3;transform:scaleX(.5)} 100%{opacity:.9;transform:scaleX(1.3)} }

/* ── Floating particles from lotus ──
   Use nth-of-type to correctly target only particle divs */
.um-hero-particle { position: absolute !important; border-radius: 50% !important; pointer-events: none !important; z-index: 10 !important; display: block !important; animation: um-particle-drift linear infinite !important; opacity: 0 !important; }
.um-hero > div.um-hero-particle:nth-of-type(1) { width: 3px !important; height: 3px !important; background: rgba(212,168,75,.9) !important; left: 48.5% !important; top: 75% !important; animation-duration: 6s !important; animation-delay: 0s !important; }
.um-hero > div.um-hero-particle:nth-of-type(2) { width: 2px !important; height: 2px !important; background: rgba(167,139,250,.8) !important; left: 50.5% !important; top: 77% !important; animation-duration: 8s !important; animation-delay: 1.8s !important; }
.um-hero > div.um-hero-particle:nth-of-type(3) { width: 2px !important; height: 2px !important; background: rgba(212,168,75,.7) !important; left: 47% !important; top: 73% !important; animation-duration: 7s !important; animation-delay: 3.2s !important; }
.um-hero > div.um-hero-particle:nth-of-type(4) { width: 3px !important; height: 3px !important; background: rgba(255,255,255,.6) !important; left: 52% !important; top: 76% !important; animation-duration: 9s !important; animation-delay: 4.8s !important; }
.um-hero > div.um-hero-particle:nth-of-type(5) { width: 2px !important; height: 2px !important; background: rgba(167,139,250,.7) !important; left: 49.5% !important; top: 79% !important; animation-duration: 6.5s !important; animation-delay: 2.2s !important; }
@keyframes um-particle-drift { 0%{transform:translateY(0) translateX(0);opacity:0} 10%{opacity:1} 85%{opacity:.5} 100%{transform:translateY(-320px) translateX(20px);opacity:0} }

/* ── Shooting stars ──
   position: fixed so they are never clipped by any parent overflow.
   nth-of-type targets only shooting-star divs correctly. */
.um-shooting-star { position: fixed !important; height: 1.5px !important; background: linear-gradient(to right, transparent, rgba(255,255,255,.9) 40%, rgba(212,168,75,.7) 70%, transparent) !important; border-radius: 100% !important; transform: rotate(-35deg) !important; animation: um-shoot linear infinite !important; pointer-events: none !important; z-index: 490 !important; opacity: 0 !important; }
.um-hero > div.um-shooting-star:nth-of-type(1) { width: 180px !important; top: 8vh !important;  right: 10vw !important; animation-duration: 8s  !important; animation-delay: 0s   !important; }
.um-hero > div.um-shooting-star:nth-of-type(2) { width: 120px !important; top: 15vh !important; right: 30vw !important; animation-duration: 11s !important; animation-delay: 3s   !important; }
.um-hero > div.um-shooting-star:nth-of-type(3) { width: 200px !important; top: 5vh !important;  right: 45vw !important; animation-duration: 7s  !important; animation-delay: 5s   !important; }
.um-hero > div.um-shooting-star:nth-of-type(4) { width: 150px !important; top: 18vh !important; right: 8vw  !important; animation-duration: 13s !important; animation-delay: 7s   !important; }
.um-hero > div.um-shooting-star:nth-of-type(5) { width: 100px !important; top: 3vh !important;  right: 62vw !important; animation-duration: 9s  !important; animation-delay: 1.5s !important; }
.um-hero > div.um-shooting-star:nth-of-type(6) { width: 160px !important; top: 10vh !important; right: 78vw !important; animation-duration: 12s !important; animation-delay: 9s   !important; }
@keyframes um-shoot { 0%{transform:rotate(-35deg) translateX(0);opacity:0} 2%{opacity:1} 7%{transform:rotate(-35deg) translateX(-800px);opacity:0} 100%{transform:rotate(-35deg) translateX(-800px);opacity:0} }

/* ============================================================
   22. POST BOTTOM — follow bar, rating, comments
   ============================================================ */
.um-follow-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 2rem; margin: 2rem 0 1.5rem; background: rgba(5,6,15,.52); border: 1px solid rgba(167,139,250,.25); border-radius: 10px; flex-wrap: wrap; box-shadow: 0 0 30px rgba(167,139,250,.08), 0 4px 24px rgba(0,0,0,.4); }
.um-follow-text h4 { font-family: var(--fh); font-size: 1.3rem; color: var(--um-parchment); margin: 0 0 .3rem; }
.um-follow-text h4 em { color: var(--um-purple) !important; font-style: normal !important; }
.um-follow-text p { font-family: var(--fb); font-size: .95rem; color: rgba(240,235,226,.72); margin: 0; }
.um-follow-btn { background: linear-gradient(135deg, #7c5cbf, #a78bfa, #c4622d) !important; background-size: 200% 200% !important; animation: um-btn-shift 4s ease infinite !important; border: 1px solid rgba(167,139,250,.35) !important; border-radius: 3px !important; color: #fff !important; font-family: var(--fm) !important; font-size: .82rem !important; font-weight: 500 !important; letter-spacing: .14em !important; padding: .85rem 2rem !important; text-decoration: none !important; box-shadow: 0 4px 20px rgba(124,92,191,.3) !important; transition: transform .3s !important; }
.um-follow-btn:hover { transform: translateY(-2px) !important; }
.um-star-rating { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2rem; margin: 1.5rem 0; background: rgba(5,6,15,.58); border: 1px solid rgba(167,139,250,.18); border-radius: 10px; flex-wrap: wrap; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.um-star-rating-label { font-family: var(--fm); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(240,235,226,.72); white-space: nowrap; }
.um-stars { display: flex; gap: .3rem; }
.um-star { font-size: 2rem; cursor: pointer; color: rgba(240,235,226,.25); transition: color .15s, transform .15s; line-height: 1; }
.um-star:hover, .um-star.um-star-hover, .um-star.um-star-filled { color: var(--um-gold); }
.um-star:hover, .um-star.um-star-hover { transform: scale(1.2); }
.um-star-avg { font-family: var(--fm); color: var(--um-gold); font-size: .78rem; }
.um-star-count { color: var(--um-muted); font-size: .78rem; }
.um-star-thanks { font-family: var(--fm); color: var(--um-purple); font-size: .62rem; display: none; }
/* Comments */
.comments-area { max-width: 1100px; margin: 2rem auto 5rem; padding: 2.5rem; background: rgba(5,6,15,.52); border-radius: 12px; border: 1px solid rgba(167,139,250,.12); }
.comments-title { font-family: var(--fh); font-size: 1.6rem; color: var(--um-parchment); margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--um-rule); }
.comment-form .comment-notes { display: none !important; }
.comment-form .logged-in-as { font-family: var(--fm) !important; font-size: .65rem !important; color: rgba(240,235,226,.45) !important; letter-spacing: .08em !important; }
.comment-form .logged-in-as a { color: var(--um-purple) !important; border-bottom: none !important; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"] { background: rgba(5,6,15,.55) !important; border: 1px solid rgba(167,139,250,.18) !important; border-radius: 8px !important; color: var(--um-parchment) !important; font-family: var(--fb) !important; font-size: 1rem !important; padding: 1rem 1.2rem !important; width: 100% !important; margin-bottom: 1rem !important; backdrop-filter: blur(8px) !important; }
.comment-form textarea:focus, .comment-form input:focus { outline: none !important; border-color: rgba(167,139,250,.45) !important; box-shadow: 0 0 20px rgba(167,139,250,.12) !important; }
.comment-form textarea { min-height: 160px !important; resize: vertical !important; }
.comment-form input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; width: 18px !important; height: 18px !important; border: 1px solid rgba(167,139,250,.35) !important; border-radius: 4px !important; background: rgba(5,6,15,.6) !important; cursor: pointer !important; position: relative !important; vertical-align: middle !important; margin-right: .6rem !important; transition: all .2s !important; }
.comment-form input[type="checkbox"]:checked { background: var(--um-purple) !important; border-color: var(--um-purple) !important; }
.comment-form input[type="checkbox"]:checked::after { content: '✓' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; color: #fff !important; font-size: .75rem !important; line-height: 1 !important; }
.comment-form p label { font-family: var(--fb) !important; font-size: .9rem !important; color: rgba(240,235,226,.65) !important; }
.comment-form .submit, #submit { background: linear-gradient(135deg, #7c5cbf, #a78bfa, #c4622d) !important; background-size: 200% 200% !important; animation: um-btn-shift 4s ease infinite !important; border: 1px solid rgba(167,139,250,.35) !important; border-radius: 3px !important; color: #fff !important; font-family: var(--fm) !important; font-size: .82rem !important; font-weight: 500 !important; letter-spacing: .14em !important; padding: .9rem 2.2rem !important; cursor: pointer !important; box-shadow: 0 4px 20px rgba(124,92,191,.3) !important; text-transform: uppercase !important; margin-top: .5rem !important; }
.comment-form .submit:hover, #submit:hover { transform: translateY(-2px) !important; }
/* Jetpack subscribe */
.jetpack_subscription_widget, #subscribe-widget, .widget_jetpack_subscription_widget { background: rgba(5,6,15,.6) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(167,139,250,.2) !important; border-radius: 10px !important; padding: 2rem !important; margin: 2rem 0 !important; }
.jetpack_subscription_widget h2, .jetpack_subscription_widget .widget-title { font-family: var(--fh) !important; font-size: 1.3rem !important; color: var(--um-parchment) !important; margin-bottom: .5rem !important; }
.jetpack_subscription_widget p { font-family: var(--fb) !important; font-size: .95rem !important; color: rgba(240,235,226,.72) !important; margin-bottom: 1.2rem !important; }
#subscribe-email, .jetpack_subscription_widget input[type="email"] { background: rgba(5,6,15,.55) !important; border: 1px solid rgba(167,139,250,.25) !important; border-radius: 6px !important; color: var(--um-parchment) !important; font-family: var(--fb) !important; font-size: 1rem !important; padding: .85rem 1.2rem !important; width: 100% !important; margin-bottom: 1rem !important; }
#subscribe-submit input, .jetpack_subscription_widget input[type="submit"] { background: linear-gradient(135deg, #7c5cbf, #a78bfa, #c4622d) !important; background-size: 200% 200% !important; animation: um-btn-shift 4s ease infinite !important; border: 1px solid rgba(167,139,250,.35) !important; border-radius: 3px !important; color: #fff !important; font-family: var(--fm) !important; font-size: .82rem !important; font-weight: 500 !important; letter-spacing: .14em !important; padding: .85rem 2rem !important; cursor: pointer !important; width: 100% !important; text-transform: uppercase !important; box-shadow: 0 4px 20px rgba(124,92,191,.3) !important; }

/* ============================================================
   23. ABOUT PAGE TEXT SHADOWS
   ============================================================ */
.um-about-h1, .um-about-hero-lead, .um-about-hero .um-eyebrow span { text-shadow: 0 0 20px rgba(5,6,15,.95), 0 2px 12px rgba(5,6,15,1), 0 0 40px rgba(5,6,15,.9) !important; }
.um-about-site-header h2, .um-about-site-lead { text-shadow: 0 0 20px rgba(5,6,15,.95), 0 2px 10px rgba(5,6,15,1) !important; }
.um-about-big-quote, .um-about-closing-sub { text-shadow: 0 0 20px rgba(5,6,15,.95), 0 2px 10px rgba(5,6,15,1) !important; }
.um-about-col h3, .um-about-col p { text-shadow: 0 0 20px rgba(5,6,15,.95), 0 2px 10px rgba(5,6,15,1) !important; }

/* ============================================================
   24. RESPONSIVE
   ============================================================ */
/* 900px — mobile nav */
@media (max-width: 900px) {
  .um-nav { display: none !important; }
  .um-hamburger { display: flex !important; }
  .um-header-inner { padding: 0 1.5rem; }
  .um-footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .um-footer-brand { grid-column: 1 / -1; }
}

/* 1024px — tablet */
@media (max-width: 1024px) {
  .um-section-cards { grid-template-columns: repeat(2,1fr) !important; padding: 2rem; }
  .um-featured-post { grid-template-columns: 1fr !important; }
  .um-fp-img { min-height: 260px; }
  .um-post-grid { grid-template-columns: repeat(2,1fr) !important; }
  .um-horoscope-strip { grid-template-columns: repeat(2,1fr) !important; }
  .um-orbit-deep-grid { grid-template-columns: repeat(2,1fr) !important; }
  .um-archive-grid { grid-template-columns: repeat(2,1fr) !important; }
  .um-about-glass { grid-template-columns: 1fr !important; }
  .um-about-hero-inner { grid-template-columns: 1fr !important; gap: 3rem; }
  .um-about-portrait-frame { width: 280px; height: 360px; margin: 0 auto; }
  .um-about-block { grid-template-columns: 1fr !important; gap: 2.5rem; }
  .um-about-block-right .um-about-block-img { order: -1; }
  .um-article-layout { padding: 3rem 1.5rem 5rem !important; }
  .um-article-main { padding: 2.5rem !important; }
  .post-navigation { grid-template-columns: 1fr !important; padding: 0 1.5rem 4rem; }
  .um-lotus-frame { width: 340px !important; height: 340px !important; }
  .um-ring:nth-child(1) { width: 340px !important; height: 340px !important; margin-top: -170px !important; margin-left: -170px !important; }
  .um-ring:nth-child(2) { width: 252px !important; height: 252px !important; margin-top: -126px !important; margin-left: -126px !important; }
  .um-ring:nth-child(3) { width: 170px !important; height: 170px !important; margin-top: -85px !important; margin-left: -85px !important; }
}

/* 768px — mobile */
@media (max-width: 768px) {
  :root { --size-body:1.05rem; --size-small:0.92rem; --size-label:0.68rem; --size-nav:0.78rem; --size-h2:1.4rem; --size-h3:1.15rem; }
  .um-section-cards { grid-template-columns: 1fr !important; padding: 1.5rem !important; }
  .um-scard { min-height: 240px !important; }
  .um-posts-section, .um-about-strip, .um-orbit-section { padding: 1.5rem 1.5rem 3rem !important; }
  .um-post-grid { grid-template-columns: 1fr !important; }
  .um-horoscope-strip { grid-template-columns: repeat(2,1fr) !important; }
  .um-orbit-deep-grid { grid-template-columns: 1fr !important; }
  .um-archive-grid { grid-template-columns: 1fr !important; }
  .um-archive-body { padding: 1.5rem 1.5rem 3rem; }
  .um-archive-header { padding: 3rem 1.5rem 2rem; }
  .um-archive-title { font-size: 2.4rem !important; }
  .um-featured-post { grid-template-columns: 1fr !important; }
  .um-fp-img { min-height: 220px !important; }
  .um-fp-body { padding: 1.5rem !important; }
  .um-about-glass { grid-template-columns: 1fr !important; padding: 1.8rem !important; gap: 1.5rem !important; text-align: center !important; }
  .um-about-portrait { margin: 0 auto !important; }
  .um-lotus-frame { width: 280px !important; height: 280px !important; }
  .um-lotus-img { width: 155px !important; height: 155px !important; }
  .um-ring:nth-child(1) { width: 280px !important; height: 280px !important; margin-top: -140px !important; margin-left: -140px !important; }
  .um-ring:nth-child(2) { width: 207px !important; height: 207px !important; margin-top: -104px !important; margin-left: -104px !important; }
  .um-ring:nth-child(3) { width: 140px !important; height: 140px !important; margin-top: -70px !important; margin-left: -70px !important; }
  .um-post-hero { padding: 4rem 1.5rem 3rem !important; }
  .um-post-hero h1 { font-size: clamp(1.9rem,8vw,2.8rem) !important; }
  .um-deck { font-size: 1rem !important; }
  .um-article-layout { padding: 2rem 1rem 4rem !important; }
  .um-article-main { padding: 1.5rem !important; }
  .entry-content { font-size: 1.02rem !important; }
  .entry-content blockquote, .wp-block-quote { margin: 2.5rem .5rem !important; padding: 1.5rem 1rem !important; }
  .entry-content blockquote p, .wp-block-quote p { font-size: 1.2rem !important; }
  .um-hero-sub { font-size: 1.05rem !important; }
  .um-about-hero { padding: 4rem 1.5rem 3rem !important; }
  .um-about-hero-inner { grid-template-columns: 1fr !important; }
  .um-about-portrait-frame { width: 220px !important; height: 280px !important; }
  .um-about-h1 { font-size: 2.4rem !important; }
  .um-about-content-section { padding: 2rem 1.5rem !important; }
  .um-about-site-section { padding: 2.5rem 1.5rem !important; }
  .um-about-three-cols { grid-template-columns: 1fr !important; }
  .um-about-closing { padding: 4rem 1.5rem !important; }
  .um-footer-inner { grid-template-columns: 1fr !important; padding: 2.5rem 1.5rem 2rem !important; gap: 2rem !important; }
  .um-footer-bottom { flex-direction: column !important; gap: .5rem !important; text-align: center !important; padding: 1.2rem 1.5rem !important; }
  .um-header-inner { padding: 0 1.2rem !important; }
  .um-logo-tagline { display: none !important; }
  html, body { overflow-x: hidden !important; }
  /* Reduce hero effects on mobile */
  .um-hero > div.um-shooting-star:nth-of-type(n+4) { display: none !important; }
  .um-lotus-reflection { width: 240px !important; }
  .um-hero > div.um-hero-particle:nth-of-type(n+4) { display: none !important; }
  .um-wave-ring { animation-duration: 7s !important; }
}

/* 560px */
@media (max-width: 560px) {
  .um-footer-inner { grid-template-columns: 1fr !important; }
  .um-footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
}
/* ── About hero overlay + layout fixes ── */
.um-about-hero {
  position: relative !important;
  overflow: hidden !important;
}
.um-about-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(5,6,15,.68) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.um-about-hero-inner {
  position: relative !important;
  z-index: 2 !important;
}
/* ============================================================
   ABOUT PAGE — GLASS CARD TREATMENT
   Each section wrapped in a glass card like the Navigator
   strip on the homepage. Consistent look throughout.
   ============================================================ */

/* ── Hero section — dark overlay + centered single column ── */
.um-about-hero {
  min-height: 70vh !important;
  padding: 5rem 2rem 4rem !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.um-about-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(5,6,15,.72) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.um-about-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: center !important;
}
.um-about-hero-text { position: relative; z-index: 2; }
.um-about-hero-portrait { display: flex; justify-content: center; align-items: center; }

/* ── Content section — glass card wrapper ── */
.um-about-content-section {
  padding: 3rem 2rem !important;
}
.um-about-content-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* Each content block gets glass card treatment */
.um-about-block {
 background: linear-gradient(135deg, rgba(79,195,195,.08) 0%, rgba(5,6,15,.75) 50%, rgba(167,139,250,.05) 100%); 
 backdrop-filter: blur(20px); 
 border: 5px solid rgba(79,195,195,.22) !important; 
 box-shadow: 0 0 40px rgba(79,195,195,.12), 0 8px 40px rgba(0,0,0,.4)
  /*background: rgba(5,6,15,.62) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(79,195,195,.15) !important;
  border-radius: 16px !important;
  padding: 3rem !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 40px rgba(79,195,195,.06) !important;*/
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  align-items: center !important;
}

/* ── Site section — glass card ── */
.um-about-site-section {
  padding: 2rem !important;
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}
.um-about-site-inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
  background: linear-gradient(135deg, rgba(79,195,195,.08) 0%, rgba(5,6,15,.75) 50%, rgba(167,139,250,.05) 100%); backdrop-filter: blur(20px); border: 5px solid rgba(79,195,195,.22) !important; box-shadow: 0 0 40px rgba(79,195,195,.12), 0 8px 40px rgba(0,0,0,.4)
  /*background: rgba(5,6,15,.62) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(167,139,250,.15) !important;
  border-radius: 16px !important;
  padding: 3rem !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 40px rgba(167,139,250,.06) !important;*/
}
.um-about-three-cols {
  max-width: 100% !important;
  margin-top: 2rem !important;
}
.um-about-col {
  background: rgba(5,6,15,.5) !important;
  backdrop-filter: blur(12px) !important;
}

/* ── Closing section — glass card ── */
.um-about-closing {
  padding: 2rem 2rem 4rem !important;
}
.um-about-closing-inner {
  max-width: 700px !important;
  margin: 0 auto !important;
  background: linear-gradient(135deg, rgba(79,195,195,.08) 0%, rgba(5,6,15,.75) 50%, rgba(167,139,250,.05) 100%); 
  backdrop-filter: blur(20px); 
  border: 5px solid rgba(79,195,195,.22) !important; 
  box-shadow: 0 0 40px rgba(79,195,195,.12), 0 8px 40px rgba(0,0,0,.4)
  /*background: rgba(5,6,15,.62) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(79,195,195,.15) !important;
  border-radius: 16px !important;*/
  padding: 3.5rem !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.4) !important;
  text-align: center !important;
}
.um-about-closing::before { display: none !important; }

/* ── Photo in content blocks ── */
.um-about-photo-2 {
  width: 100% !important;
  height: 380px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid rgba(79,195,195,.15) !important;
  box-shadow: 0 0 40px rgba(79,195,195,.1), var(--s3) !important;
}

/* ── Section divider spacing ── */
.um-section-divider {
  max-width: 1100px !important;
  padding: 1.5rem 2rem !important;
}

/* ── Mobile responsive ── */
@media (max-width: 900px) {
  .um-about-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }
  .um-about-hero-portrait { order: -1; }
  .um-about-portrait-frame { width: 200px !important; height: 250px !important; margin: 0 auto !important; }
  .um-about-block {
    grid-template-columns: 1fr !important;
    padding: 2rem !important;
    gap: 2rem !important;
  }
  .um-about-block-right .um-about-block-img { order: -1; }
  .um-about-site-inner { padding: 2rem !important; }
  .um-about-closing-inner { padding: 2rem !important; }
  .um-about-three-cols { grid-template-columns: 1fr !important; }
}
/* ── About page — remove inner card from col boxes ── */
.um-about-col {
  background: rgba(5,6,15,.35) !important;
  backdrop-filter: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* ── About block text — remove double card ── */
.um-about-block-text {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* ============================================================
   POST BOTTOM FIXES v2
   Stars, author box, comment form visibility and layout
   ============================================================ */

/* ── STAR RATING — make stars visible ── */
.um-star {
  color: rgba(240,235,226,.35) !important;
  font-size: 2rem !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: .1rem !important;
  line-height: 1 !important;
  transition: color .15s, transform .2s !important;
  -webkit-text-stroke: 1px rgba(240,235,226,.5) !important;
}
.um-star:hover,
.um-star.um-star-hover { 
  color: var(--um-gold) !important; 
  transform: scale(1.25) !important;
  -webkit-text-stroke: 1px var(--um-gold) !important;
}
.um-star.um-star-filled { 
  color: var(--um-gold) !important;
  -webkit-text-stroke: 1px var(--um-gold) !important;
}

/* ── AUTHOR BOX — consistent bio, avatar fix ── */
.author-box {
  max-width: 860px !important;
  margin: 2rem auto !important;
  padding: 2rem 2.5rem !important;
  background: rgba(5,6,15,.62) !important;
  border: 1px solid rgba(167,139,250,.2) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 0 30px rgba(167,139,250,.07), 0 4px 24px rgba(0,0,0,.4) !important;
  display: flex !important;
  gap: 1.5rem !important;
  align-items: center !important;
}
.auth-av,
.auth-av img,
.auth-avatar-img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid rgba(167,139,250,.25) !important;
  box-shadow: 0 0 20px rgba(167,139,250,.15) !important;
  flex-shrink: 0 !important;
}
.auth-info h4 {
  font-family: var(--fh) !important;
  font-size: 1.15rem !important;
  color: var(--um-parchment) !important;
  margin: 0 0 .5rem !important;
}
.auth-info p {
  font-family: var(--fb) !important;
  font-size: .95rem !important;
  color: rgba(240,235,226,.72) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ── COMMENTS WRAP — match article width, proper container ── */
.um-comments-wrap {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 2rem 5rem !important;
}

/* ── COMMENT FORM WRAP — glass card, visible text ── */
.um-comment-form-wrap {
  background: rgba(5,6,15,.72) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(167,139,250,.2) !important;
  border-radius: 14px !important;
  padding: 2.5rem !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 40px rgba(167,139,250,.06) !important;
  margin-top: 1.5rem !important;
}

/* ── COMMENT FORM TITLE — visible ── */
.um-comment-form-title {
  font-family: var(--fh) !important;
  font-size: 1.6rem !important;
  color: var(--um-parchment) !important;
  margin: 0 0 .5rem !important;
  text-shadow: 0 0 20px rgba(5,6,15,.9), 0 2px 8px rgba(5,6,15,.95) !important;
}
.um-comment-form-sub {
  font-family: var(--fb) !important;
  font-style: italic !important;
  font-size: .95rem !important;
  color: rgba(240,235,226,.55) !important;
  margin: 0 0 2rem !important;
}

/* ── LOGGED IN ROW — visible text, purple fix ── */
.um-comment-logged-in {
  display: flex !important;
  align-items: center !important;
  gap: .8rem !important;
  padding: .9rem 1.2rem !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  margin-bottom: 1.8rem !important;
  font-family: var(--fb) !important;
  font-size: .95rem !important;
  color: rgba(240,235,226,.75) !important;
}
.um-comment-logged-in strong { color: var(--um-parchment) !important; }
.um-logout-link {
  margin-left: auto !important;
  font-family: var(--fm) !important;
  font-size: .6rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(240,235,226,.45) !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  padding: .25rem .8rem !important;
  border-radius: 99px !important;
  transition: all .2s !important;
}
.um-logout-link:hover { 
  color: var(--um-parchment) !important; 
  border-color: rgba(255,255,255,.25) !important;
}

/* ── FIELD LABELS — visible ── */
.um-field-label {
  font-family: var(--fm) !important;
  font-size: .65rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(240,235,226,.65) !important;
  margin-bottom: .4rem !important;
  display: block !important;
}
.um-required { color: var(--um-purple) !important; }
.um-field-hint {
  font-family: var(--fm) !important;
  font-size: .58rem !important;
  color: rgba(240,235,226,.3) !important;
  margin-top: .3rem !important;
  display: block !important;
}

/* ── FORM INPUTS — styled ── */
.um-field-input,
.um-field-textarea {
  background: rgba(5,6,15,.65) !important;
  border: 1px solid rgba(167,139,250,.2) !important;
  border-radius: 8px !important;
  color: var(--um-parchment) !important;
  font-family: var(--fb) !important;
  font-size: 1rem !important;
  padding: .9rem 1.1rem !important;
  width: 100% !important;
  transition: border-color .2s, box-shadow .2s !important;
  box-sizing: border-box !important;
}
.um-field-textarea { 
  min-height: 160px !important; 
  resize: vertical !important; 
}
.um-field-input::placeholder,
.um-field-textarea::placeholder {
  color: rgba(240,235,226,.3) !important;
}
.um-field-input:focus,
.um-field-textarea:focus {
  outline: none !important;
  border-color: rgba(167,139,250,.5) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,.08) !important;
}

/* ── CHECK LABEL — visible text ── */
.um-check-text {
  font-family: var(--fb) !important;
  font-size: .88rem !important;
  color: rgba(240,235,226,.6) !important;
}

/* ── FOLLOW BAR — match width ── */
.um-follow-bar {
  max-width: 860px !important;
  margin: 2rem auto 1.5rem !important;
}

/* ── STAR RATING — match width ── */
.um-star-rating {
  max-width: 860px !important;
  margin: 2.5rem auto 1.5rem !important;
}

/* ── POST TAGS — match width ── */
.post-tags {
  max-width: 860px !important;
  margin: 1.5rem auto !important;
}

/* ── POST NAVIGATION — match width ── */
.post-navigation {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 2rem 3rem !important;
}

/* Mobile */
@media (max-width: 768px) {
  .um-comments-wrap { padding: 0 1rem 3rem !important; }
  .um-comment-form-wrap { padding: 1.5rem !important; }
  .um-form-two-col { grid-template-columns: 1fr !important; }
  .um-form-footer { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }
  .um-comment-submit { width: 100% !important; justify-content: center !important; }
  .author-box { flex-direction: column !important; text-align: center !important; }
}
/* ── NOT YOU link — more visible ── */
.um-logout-link {
  color: rgba(240,235,226,.75) !important;
  border-color: rgba(240,235,226,.2) !important;
}
.um-logout-link:hover {
  color: #fff !important;
  border-color: rgba(240,235,226,.45) !important;
  background: rgba(255,255,255,.06) !important;
}

/* ── FORM FOOTER — checkbox left, button right ── */
.um-form-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  margin-top: 1.8rem !important;
}
.um-check-label {
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  cursor: pointer !important;
}
.um-comment-submit {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Mobile — stack vertically, button full width */
@media (max-width: 600px) {
  .um-form-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .um-comment-submit {
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }
}
/* ── Post bottom cards — gold outer, silver inner ── */

/* Star rating — gold border */
.um-star-rating {
  border: 1px solid rgba(212,168,75,.35) !important;
  box-shadow: 0 0 30px rgba(212,168,75,.08), 0 4px 24px rgba(0,0,0,.4) !important;
}

/* Follow bar — gold border */
.um-follow-bar {
  border: 1px solid rgba(212,168,75,.32) !important;
  box-shadow: 0 0 30px rgba(212,168,75,.07), 0 4px 24px rgba(0,0,0,.4) !important;
}

/* Author box — gold outer border */
.author-box {
  border: 1px solid rgba(212,168,75,.3) !important;
  box-shadow: 0 0 30px rgba(212,168,75,.08), 0 4px 24px rgba(0,0,0,.4) !important;
}

/* Post navigation cards — gold border */
.nav-previous,
.nav-next {
  border: 1px solid rgba(212,168,75,.25) !important;
  box-shadow: 0 0 20px rgba(212,168,75,.06), 0 4px 16px rgba(0,0,0,.35) !important;
}
.nav-previous:hover,
.nav-next:hover {
  border-color: rgba(212,168,75,.5) !important;
  box-shadow: 0 0 40px rgba(212,168,75,.15), 0 8px 30px rgba(0,0,0,.45) !important;
}

/* Comments list — gold outer border */
.um-comments-list {
  border: 1px solid rgba(212,168,75,.28) !important;
  box-shadow: 0 0 30px rgba(212,168,75,.07), 0 4px 24px rgba(0,0,0,.4) !important;
}

/* Individual comment cards — silver inner border */
.um-comment-card {
  border-bottom: 1px solid rgba(210,218,230,.08) !important;
}
.um-comment-card:last-child {
  border-bottom: none !important;
}

/* Comment form — silver outer, gold inner glow */
.um-comment-form-wrap {
  border: 1px solid rgba(210,218,230,.2) !important;
  box-shadow: 
    0 0 40px rgba(212,168,75,.06),
    inset 0 0 60px rgba(210,218,230,.02),
    0 8px 40px rgba(0,0,0,.5) !important;
}

/* Logged in row — silver inner border */
.um-comment-logged-in {
  border: 1px solid rgba(210,218,230,.12) !important;
}

/* Input fields — silver border, gold on focus */
.um-field-input,
.um-field-textarea {
  border: 1px solid rgba(210,218,230,.15) !important;
}
.um-field-input:focus,
.um-field-textarea:focus {
  border-color: rgba(212,168,75,.4) !important;
  box-shadow: 0 0 0 3px rgba(212,168,75,.06) !important;
}