﻿/*
Theme Name:        Dream Chaser Multi v30
Theme URI:         https://dreamchaser.app
Author:            Hypera AI
Author URI:        https://dreamchaser.app
Description:       Dream Chaser multilingual landing theme with premium 3D hero, dimensional app showcase, and WebGL cosmic background.
Version:           2.2.3
Requires at least: 6.0
Requires PHP:      8.0
License:           Proprietary
License URI:       https://dreamchaser.app
Text Domain:       dreamchaser
Tags:              custom, blog, landing-page
*/

/*
 * CHANGELOG (v29 â€” May 2026) â€” READABILITY PASS
 * ---------------------------------------------
 * Full top-to-bottom legibility audit & fix (WCAG 2.1 AA mindset):
 * - GLOBAL INK VEIL: assets/cosmic.css now lays a tunable dark wash
 *   (.dc-cosmic-bg::before) over the WebGL scene on EVERY page, so text
 *   contrast is restored everywhere â€” homepage hero/sections/cards/nav/
 *   footer included, not just article columns. Single tunable value.
 * - DIMMER 3D AT SOURCE: assets/cosmic.js star/orb/nebula opacities cut
 *   ~30% so bright hotspots no longer sit behind body text.
 * - SECONDARY TEXT: --mist alpha .62 â†’ .80 in BOTH :root blocks
 *   (front-page.php inline + style.css). This lifts nearly all body/
 *   secondary text (hero sub, section leads, nav, card & footer copy,
 *   journal excerpts) above AA on the veiled background.
 * - BODY WEIGHT: 300 (Manrope Light) â†’ 400 in both body{} rules;
 *   line-height 1.6 â†’ 1.65. Light weight on a dark animated bg was the
 *   single biggest legibility weakness.
 * - "MUTED" LISTS: .price-card li.muted opacity .55 â†’ .80 (was ~0.34
 *   effective once combined with --mist alpha â€” effectively invisible).
 * - Inner-page reading scrim retained but rebalanced so it doesn't
 *   stack too dark with the new global veil.
 * No markup/PHP/i18n behaviour changed â€” purely visual hardening.
 *
 * CHANGELOG (v28 â€” May 2026)
 * --------------------------
 * - BLOG LISTING FIX (page-blog.php): the /blog/ page previously showed
 *   only child Pages of the "blog" Page that were >= 500 words â€” so
 *   normal Posts and shorter articles were invisible (users saw only 3).
 *   Now lists ALL published Posts AND child Pages, newest-modified
 *   first, with pagination. The word-count gate is gone (configurable
 *   via DC_BLOG_MIN_WORDS, default 0). Homepage Journal teaser stays a
 *   curated 3 by design.
 * - MEET SUSAN i18n FIX (front-page.php + translations.js): the cycling
 *   example conversation (#msUserWho/#msUserText/#msSusanText) and the
 *   Family/Love/Career/Self tabs were hard-coded English (added in v22
 *   without i18n) â€” they never translated. Tabs now carry data-i18n;
 *   the conversation engine reads DC_I18N for the active language and
 *   re-renders on language change (MutationObserver on <html lang>).
 *   New ms.tab.* + ms.{family,love,career,self}.{who,user,susan} keys
 *   added to translations.js in EN/TR/ES/DE. Existing language runtime
 *   untouched.
 * - NOTE: neither issue was caused by the v26/v27 3D layer â€” both are
 *   pre-existing v25 behaviours; the 3D layer is text/i18n-agnostic.
 *
 * CHANGELOG (v27 â€” May 2026)
 * --------------------------
 * - Packaging/version label only: theme renamed v26 â†’ v27 (folder,
 *   Theme Name, Version 1.9.0). No functional change â€” code is
 *   byte-identical to v26 (the verified Global 3D Cosmic Background
 *   release). Installs as its own theme slug, so it won't collide
 *   with any earlier upload attempt.
 *
 * CHANGELOG (v26 â€” May 2026)
 * --------------------------
 * - GLOBAL 3D COSMIC BACKGROUND: a real WebGL scene (assets/cosmic.js +
 *   bundled assets/three.min.js, r155) renders site-wide behind every
 *   page â€” three depth-layered parallax star fields, a slowly rotating
 *   wireframe "constellation orb", and drifting nebula glows, reacting
 *   to pointer and scroll. Enqueued via functions.php on ALL pages
 *   (homepage + inner) and printed as a fixed #dc-bg canvas on
 *   wp_footer. assets/cosmic.css adds the nebula wash + grain so inner
 *   pages share the homepage's exact atmosphere.
 * - NO CDN: three.js bundled locally (privacy / perf / offline-safe).
 * - GRACEFUL DEGRADATION: pointer-events:none (never blocks content);
 *   falls back to the static nebula gradient if WebGL/JS is missing or
 *   prefers-reduced-motion is set.
 * - ZERO REGRESSION: all v25 PHP, multilingual machinery
 *   (translations.js + Polylang-aware switcher), the dynamic
 *   Stargazer's Journal query and every inner template are unchanged â€”
 *   the 3D is a purely additive layer.
 *
 * CHANGELOG (v25 â€” May 2026)
 * --------------------------
 * - BUG FIX: .journal-card and inner element CSS (.journal-img, .journal-meta,
 *   .journal-card h4, .journal-card p) were defined only in the inline <style>
 *   block of front-page.php. Inner pages (/blog/ landing, etc.) load style.css
 *   but NOT the front-page inline CSS, so the page-blog.php cards rendered as
 *   raw underlined purple links with broken image aspect ratios. Fixed by
 *   adding the full journal-card style block to style.css.
 * - SIDE EFFECT: cards on /blog/ now render with the same look as the
 *   homepage's "Stargazer's Journal" section â€” 16:10 aspect images with
 *   proper crop, brand-cream titles, rose accent on hover, smooth lift on
 *   hover (translateY -6px).
 *
 * CHANGELOG (v24 â€” May 2026)
 * --------------------------
 * - HEADER/FOOTER PARITY: header.php and footer.php rewritten to match
 *   the homepage's full nav and 4-column footer exactly.
 * - LANGUAGE SWITCHER (Polylang-aware): real <a href> links when Polylang
 *   is active, falls back to JS-i18n switcher otherwise.
 * - INNER-PAGE NAV CSS: nav, brand, lang-switcher, footer-grid styles
 *   are now in style.css.
 *
 * CHANGELOG (v23 â€” May 2026)
 * --------------------------
 * - DYNAMIC JOURNAL SECTION (homepage): hard-coded 3 journal cards
 *   replaced with dynamic WP_Query of latest Pages under Blog.
 * - NEW TEMPLATE: page-blog.php â€” applies to Page with slug "blog".
 * - STUB FILTERING: Pages with less than 500 words excluded.
 * - SMART FALLBACK IMAGES: parent-page-based fallback.
 * - PAGE TEMPLATE: page.php with featured image, breadcrumb,
 *   back-to-journal link.
 *
 * CHANGELOG (v22 â€” May 2026)
 * --------------------------
 * - MEET SUSAN upgrade + real editorial imagery.
 *
 * CHANGELOG (v21 â€” May 2026)
 * --------------------------
 * - 4-screen crossfade slider + How It Works illustrations.
 *
 * CHANGELOG (v20 â€” May 2026)
 * --------------------------
 * - Mobile hamburger menu fix.
 *
 * CHANGELOG (v19 â€” May 2026)
 * --------------------------
 * - Real screenshots, SVG ratings, FAQ icons, step illustrations.
 */

/*
 * CHANGELOG (v24 â€” May 2026)
 * --------------------------
 * - HEADER/FOOTER PARITY: header.php and footer.php rewritten to match
 *   the homepage's full nav and 4-column footer exactly. Inner pages
 *   (/blog/, /blog/dream-meanings/, /privacy-policy/, etc.) now share
 *   the same brand experience as the homepage â€” same glassmorphic
 *   sticky nav with hamburger, same language switcher, same 4-column
 *   footer with Explore / Contact / Legal.
 * - LANGUAGE SWITCHER (Polylang-aware): if Polylang is installed,
 *   options become real <a href> links to translated URLs of the
 *   current page (proper multilingual SEO). If Polylang is NOT yet
 *   installed, the switcher falls back to the homepage's JS-based
 *   UI-string swap (translations.js) for visual continuity.
 * - INNER-PAGE NAV CSS: nav, brand, lang-switcher, footer-grid styles
 *   are now in style.css (previously only inline in front-page.php),
 *   so inner pages render correctly without duplicating front-page CSS.
 * - TRANSLATIONS.JS: enqueued on all pages (was homepage-only), so
 *   data-i18n attributes work on header/footer of every page.
 *
 * CHANGELOG (v23 â€” May 2026)
 * --------------------------
 * - DYNAMIC JOURNAL SECTION (homepage): the 3 hard-coded journal cards
 *   on the homepage are now replaced with a dynamic WP_Query that pulls
 *   the latest 3 descendants of the "Blog" Page, sorted by post_modified.
 * - NEW TEMPLATE: page-blog.php â€” applied automatically to the Page with
 *   slug "blog". Renders a hero header + dynamic journal grid.
 * - STUB FILTERING: Pages with less than 500 words excluded.
 * - SMART FALLBACK IMAGES: parent-page-based fallback when no Featured
 *   Image is set.
 * - PAGE TEMPLATE: page.php enhanced with featured image, breadcrumb,
 *   back-to-journal link.
 * - STYLE.CSS CLEANUP: removed stray duplicate theme-header block.

 *
 * CHANGELOG (v22 â€” May 2026)
 * --------------------------
 * - MEET SUSAN upgrade: the old "Conversation" section is reframed as
 *   "Meet Susan." Susan introduces herself, then a real cycling example
 *   conversation plays out. Susan becomes a CHARACTER.
 * - REAL EDITORIAL IMAGERY: 4 readings photos + 3 journal images.
 *
 * CHANGELOG (v21 â€” May 2026)
 * --------------------------
 * - Showcase: real working 4-screen crossfade slider.
 * - How It Works: 120px illustrations + constellation connector.
 *
 * CHANGELOG (v20 â€” May 2026)
 * --------------------------
 * - Mobile hamburger menu fix.
 * - Hi-res screenshot upgrade.
 *
 * CHANGELOG (v19 â€” May 2026)
 * --------------------------
 * - Real screenshots, SVG ratings, FAQ icons, step illustrations.
 */

/*
 * CHANGELOG (v21 â€” May 2026)
 * --------------------------
 * - "A COSMOS IN YOUR PALM" SHOWCASE: slider now actually works.
 *   Previously the section had a static 2Ã—2 grid image with caption
 *   dots that cycled â€” but the image never changed. Fake interaction.
 *   v21: replaced with 4 individual screenshots stacked, each
 *   crossfading in sync with the captions and dots. The image really
 *   reflects what the caption is describing. Phone bigger, ambient
 *   peach/rose glow behind it for atmosphere.
 * - "THREE STEPS TO THE COSMOS" REDESIGN: illustrations bumped from
 *   56Ã—56 to 120Ã—120 with drop-shadow halo. Dotted constellation
 *   connector line links the 3 steps horizontally (desktop only).
 *   Reduced gap between headline and steps from 80 â†’ 64 px. The
 *   subtle gradient top line above each step removed â€” was visual
 *   noise. Section now feels intentional, not floating.
 *
 * CHANGELOG (v20 â€” May 2026)
 * --------------------------
 * - MOBILE MENU FIX: hamburger toggle (3 lines â†’ X) replacing the
 *   previously broken display:none on all mobile nav links.
 * - HI-RES SCREENSHOTS: all 6 in-app screenshot assets replaced with
 *   source-quality exports from design tools.
 *
 * CHANGELOG (v19 â€” May 2026)
 * --------------------------
 * - Conversation section: static HTML chat mockup â†’ real screenshot.
 * - Hero & testimonial ratings: text â˜… â†’ 5 SVG stars.
 * - FAQ topic icons per question (chat/phone/clock/lock/refresh/sparkle).
 * - How It Works step illustrations (originally 56Ã—56).
 * - Press / social proof bar after marquee.
 * - Real App Store screenshots in readings slider + showcase.
 */

/*
 * NOTE
 * ----
 * The homepage is a fully self-contained custom template (front-page.php)
 * with all its CSS inline. This file provides ONLY blog/article styling
 * that matches the brand palette. If you don't run a blog yet, this file
 * can stay empty â€” front-page.php works on its own.
 */

:root {
  --ink:       #13101a;
  --ink-2:     #1c1626;
  --plum:      #3d2347;
  --burgundy:  #6b2845;
  --cream:     #f4e9d4;
  --champagne: #d4b896;
  --rose:      #d4938d;
  --peach:     #e8b8a5;
  --mist:      rgba(244, 233, 212, 0.80); /* v29: was .62 â€” readability over cosmic bg */
  --line:      rgba(244, 233, 212, 0.12);
}

/* â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€
   Global blog styles (single posts, archives)
   â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body {
  background: var(--ink);
  color: var(--cream);
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-weight: 400; /* v29: was 300 â€” Light is hard to read on the dark animated bg */
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

body.dc-legal-page {
  --ink: #ffffff;
  --ink-2: #ffffff;
  --cream: #15131a;
  --mist: rgba(21, 19, 26, 0.72);
  --line: rgba(21, 19, 26, 0.14);
  background: #ffffff;
  color: #15131a;
}

body.dc-legal-page .wrap,
body.dc-legal-page .site-main {
  background: #ffffff;
}

body.dc-legal-page nav {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(21, 19, 26, 0.12);
  box-shadow: 0 10px 30px -28px rgba(21, 19, 26, 0.25);
}

body.dc-legal-page .brand-text,
body.dc-legal-page .nav-links a,
body.dc-legal-page .lang-toggle,
body.dc-legal-page .article-title,
body.dc-legal-page .article-content,
body.dc-legal-page .article-content h1,
body.dc-legal-page .article-content h2,
body.dc-legal-page .article-content h3 {
  color: #15131a;
}

body.dc-legal-page .nav-cta {
  color: #7f3c50 !important;
  border-color: rgba(127, 60, 80, 0.45);
}

body.dc-legal-page .article-wrap {
  max-width: 880px;
  padding-top: 76px;
  padding-bottom: 96px;
}

body.dc-legal-page .article-wrap::before,
body.dc-legal-page .article-hero::after,
body.dc-legal-page .dc-cosmic-bg {
  display: none !important;
}

body.dc-legal-page .article-content {
  color: #2a2730;
  font-size: 17px;
  line-height: 1.78;
}

body.dc-legal-page .article-content p,
body.dc-legal-page .article-content li {
  color: #34303a;
}

body.dc-legal-page .article-content a {
  color: #8d4055;
}

body.dc-legal-page footer {
  background: #ffffff;
  color: #34303a;
  border-top: 1px solid rgba(21, 19, 26, 0.12);
}

.wrap { position: relative; z-index: 2; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   NAV (matches homepage)
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(19, 16, 26, 0.55);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a {
  color: var(--mist);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--cream); }
.nav-cta {
  padding: 10px 22px;
  border: 1px solid var(--rose);
  border-radius: 100px;
  color: var(--rose) !important;
  transition: all 0.3s;
}
.nav-cta:hover { background: var(--rose); color: var(--ink) !important; }

/* Mobile hamburger toggle */
.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  cursor: pointer;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--cream);
  margin: 3px 0;
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
  border-radius: 2px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(19, 16, 26, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 18px 0 24px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a {
    padding: 14px 32px;
    width: 100%;
    font-size: 14px;
    letter-spacing: 0.18em;
  }
  .nav-links a:hover, .nav-links a:active { background: rgba(212, 147, 141, 0.08); color: var(--cream); }
  .nav-cta {
    margin: 12px 28px 4px;
    width: calc(100% - 56px);
    text-align: center;
    padding: 12px 22px !important;
  }
}

/* Brand mark with logo */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(212, 184, 150, 0.25), 0 8px 20px -8px rgba(0,0,0,0.5);
}
.brand-icon img { width: 100%; height: 100%; display: block; }
.brand-text {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.32em;
  color: var(--cream);
  line-height: 1;
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   LANGUAGE SWITCHER (matches homepage)
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
.lang-toggle {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--mist);
  padding: 8px 14px 8px 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Manrope", sans-serif;
  transition: all 0.3s;
}
.lang-toggle:hover { border-color: var(--rose); color: var(--cream); }
.lang-toggle .chev {
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s;
}
.lang-switcher.open .lang-toggle .chev { transform: rotate(225deg) translate(-2px, -2px); }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  background: rgba(28, 22, 38, 0.96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
  z-index: 100;
}
.lang-switcher.open .lang-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--mist);
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 400;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
}
.lang-option:hover { background: rgba(244, 233, 212, 0.06); color: var(--cream); }
.lang-option.active { color: var(--rose); }
.lang-option .check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.lang-option.active .check { opacity: 1; color: var(--rose); }
.lang-option .code {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--mist);
  margin-left: auto;
  font-weight: 500;
}
.lang-option.active .code { color: var(--rose); }

@media (max-width: 768px) {
  .lang-switcher { padding: 4px 32px; margin: 4px 0; }
  .lang-toggle { width: 100%; justify-content: space-between; padding: 7px 10px; font-size: 11px; }
  .lang-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    margin-top: 8px;
    width: 100% !important;
    background: rgba(244, 233, 212, 0.04) !important;
  }
}

/* Article container */
.article-wrap {
  max-width: 740px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}
.article-meta {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 24px;
  font-weight: 500;
}
.article-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 32px;
  color: var(--cream);
}
.article-title em { font-style: italic; color: var(--rose); }

.article-content {
  font-size: 18px;
  line-height: 1.75;
  color: var(--cream);
}
.article-content p { margin: 0 0 24px; opacity: 0.92; }
.article-content h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  margin: 56px 0 20px;
  color: var(--cream);
}
.article-content h2 em { font-style: italic; color: var(--rose); }
.article-content h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 24px;
  margin: 40px 0 16px;
  color: var(--cream);
}
.article-content a { color: var(--rose); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .3s; }
.article-content a:hover { color: var(--peach); }
.article-content strong { color: var(--cream); font-weight: 600; }
.article-content em { color: var(--peach); font-style: italic; }
.article-content blockquote {
  border-left: 2px solid var(--rose);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 22px;
  color: var(--cream);
}
.article-content ul, .article-content ol { margin: 0 0 24px 24px; }
.article-content li { margin-bottom: 8px; }
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  margin: 32px 0;
}
.article-content code {
  background: var(--ink-2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  border: 1px solid var(--line);
}

/* Featured image */
.article-thumb {
  margin: 0 0 48px;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.article-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Archive / blog index */
.archive-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}
.archive-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  margin: 0 0 60px;
  color: var(--cream);
}
.archive-title em { font-style: italic; color: var(--rose); }

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px;
}
.post-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-card:hover { transform: translateY(-6px); }
.post-card:hover h3 { color: var(--rose); }
.post-card .post-thumb {
  aspect-ratio: 4/3;
  border-radius: 16px;
  border: 1px solid var(--line);
  margin-bottom: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--plum), var(--burgundy));
}
.post-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .post-meta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 10px;
  font-weight: 500;
}
.post-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--cream);
  transition: color 0.3s;
}
.post-card p {
  color: var(--mist);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   FOOTER (matches homepage)
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
footer {
  border-top: 1px solid var(--line);
  padding: 60px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.footer-brand-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(212, 184, 150, 0.2), 0 12px 30px -10px rgba(0,0,0,0.5);
}
.footer-brand-icon img { width: 100%; height: 100%; display: block; }
.footer-brand h3 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: 36px;
  margin: 0;
}
.footer-brand h3 em { font-style: italic; color: var(--rose); }
.footer-brand p {
  color: var(--mist);
  font-size: 14px;
  max-width: 320px;
  line-height: 1.6;
  margin: 16px 0;
}
.footer-tagline {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--rose);
  font-size: 18px;
  margin-top: 8px;
}
.footer-col h5 {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 20px;
  font-weight: 600;
}
.footer-col a, .footer-col p {
  display: block;
  color: var(--mist);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 10px;
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--mist);
  letter-spacing: 0.1em;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom .made-with {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--rose);
  font-size: 16px;
  letter-spacing: 0.05em;
}

/* WordPress-specific classes */
.alignwide { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.wp-block-image figcaption {
  text-align: center;
  font-size: 13px;
  color: var(--mist);
  margin-top: 8px;
  font-style: italic;
}
.screen-reader-text { position: absolute; left: -9999px; }

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   STARGAZER'S JOURNAL CARDS (v25 fix)
   Used on /blog/ landing page (page-blog.php).
   Mirrors homepage front-page.php inline CSS exactly.
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) {
  .journal-grid { grid-template-columns: 1fr; }
}

.journal-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.journal-card:hover { transform: translateY(-6px); }
.journal-card:hover .journal-img { border-color: rgba(212, 147, 141, 0.5); }
.journal-card:hover h4 { color: var(--rose); }

.journal-img {
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  border: 1px solid var(--line);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s, transform 0.6s;
  background: var(--ink-2);
}
.journal-img picture,
.journal-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.journal-img img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.journal-card:hover .journal-img img { transform: scale(1.04); }
.journal-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(19, 16, 26, 0.45) 100%);
  pointer-events: none;
  border-radius: 20px;
}

.journal-meta {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 12px;
  font-weight: 500;
}
.journal-card h4 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.18;
  margin-bottom: 12px;
  color: var(--cream);
  transition: color 0.3s;
}
.journal-card h4 em { font-style: italic; color: var(--rose); }
.journal-card p {
  color: var(--mist);
  font-size: 15px;
  line-height: 1.6;
}

