/* Shared article theme — "Dala" style, matching the DeeperYou homepage.
   Loaded AFTER each article's inline styles: pure-black void, violet accent, amber spark,
   huge Inter weight-400 headings, ultra-light body, no cards/borders. */

:root {
  --iris: #8052ff; --saffron: #ffb829; --verdant: #15846e; --ash: #9a9a9a; --silver: #bdbdbd;
  --violet: #8052ff; --cyan: #8052ff; --blue: #8052ff; --green: #15846e;
  --text: #ffffff; --muted: #9a9a9a; --bg: #000000;
  --hair: rgba(255,255,255,.10);
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Base: pure-black void; ambient particles supply depth (no grid) ---- */
body { background: #000 !important; color: #fff !important; font-family: var(--sans) !important; font-weight: 300; line-height: 1.6; font-feature-settings: "ss01" on; }
body::before { display: none !important; }
#ambientCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.page, .site-header, main, footer { position: relative; z-index: 2; }
a { color: var(--iris); } a:hover { color: #fff; }

/* ---- Type: hierarchy from scale, not weight ---- */
.hero h1 { font-family: var(--sans) !important; font-weight: 400 !important; font-size: clamp(34px, 4.4vw, 62px) !important; line-height: 1.07 !important; letter-spacing: -.035em !important; text-wrap: balance; color: #fff; overflow-wrap: break-word; }
.section h2, .section-inner h2 { font-family: var(--sans) !important; font-weight: 400 !important; font-size: clamp(30px, 4.6vw, 64px) !important; line-height: 1.08 !important; letter-spacing: -.04em !important; color: #fff; overflow-wrap: break-word; }
.section-inner h3, .card h3 { font-family: var(--sans) !important; font-weight: 500 !important; letter-spacing: -.02em; color: #fff; }
.gradient-text { color: var(--saffron) !important; -webkit-text-fill-color: var(--saffron) !important; background: none !important; font-style: normal !important; }
.eyebrow { color: var(--saffron) !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .14em; font-family: var(--sans) !important; }
.deck { color: #dfe1e6; line-height: 1.6; }
.section-inner > p { font-size: 1.06rem; line-height: 1.85; max-width: 70ch; color: var(--silver); }

/* ---- Strip panels/cards/borders — float on the void ---- */
.card, .callout, .quote-card, .table-wrap, .science-item, .refs, .hero-card, .flow-step, .ladder-row, .pull-line,
.hero-visual, .coach-map, .social-map {
  background: transparent !important; border: none !important; box-shadow: none !important;
}
.tag { background: transparent !important; border: 1px solid var(--hair) !important; color: var(--silver) !important; border-radius: 9999px !important; }
.pull-line { border-left: 2px solid var(--iris) !important; }

/* ---- Shared header (Dala) ---- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(0,0,0,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: none; }
.site-header-inner { max-width: 1280px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 22px; }
.site-header .brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; letter-spacing: -.01em; font-size: 18px; font-family: var(--sans); }
.brand-logo { width: 30px; height: 30px; display: block; flex: none; }
.site-header .dot, .site-footer .dot { color: var(--iris); }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a { color: var(--ash); text-decoration: none; text-transform: uppercase; font-size: 14px; font-weight: 600; letter-spacing: .03em; }
.site-nav a:hover { color: #fff; }
.site-cta { background: var(--iris); color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: .04em; padding: 12px 20px; border-radius: 9999px; white-space: nowrap; }
.site-cta:hover { background: #7040ff; }
@media (max-width: 860px) { .site-nav { display: none; } .site-cta { margin-left: auto; } }

/* ---- Shared footer ---- */
.site-footer { border-top: 1px solid var(--hair); margin-top: 60px; }
.site-footer-inner { max-width: 1280px; margin: 0 auto; padding: 34px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; color: var(--ash); font-size: 13px; }
.site-footer .brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 600; font-family: var(--sans); }
.site-footer .brand-logo { width: 26px; height: 26px; }
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer nav a { color: var(--ash); text-decoration: none; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.site-footer nav a:hover { color: #fff; }
.site-footer .spacer { margin-left: auto; }

/* ---- Sections: no framed panels — hairline separators and generous space, like the homepage ---- */
.section { background: transparent !important; border: 0 !important; border-top: 1px solid var(--hair) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
.section-inner { padding: clamp(56px, 8vw, 104px) 0 !important; }
.card { border-top: 1px solid rgba(255,255,255,.12) !important; border-radius: 0 !important; padding: 24px 0 8px !important; }
.card::before, .card::after, .callout::before, .quote-card::before, .science-item::before, .flow-step::before, .hero-card::before { display: none !important; }

/* ---- Readability on black: ultra-light only for large text ---- */
p, li, td, th { font-weight: 400 !important; }
p, li, td { color: #c9ccd3; }
.deck, .large, .section-inner > p { font-weight: 300 !important; }
.large { color: #e4e6eb !important; }

/* ---- "Read next" buttons: one violet pill + a ghost link ---- */
.button-row { margin-top: 36px !important; gap: 14px !important; }
.button-row .btn { background: var(--iris) !important; border: 0 !important; color: #fff !important; box-shadow: none !important; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; font-weight: 600 !important; padding: 0 22px !important; text-align: center; }
.button-row .btn.secondary { background: transparent !important; border: 1px solid var(--hair) !important; color: var(--silver) !important; }
.button-row .btn:hover { filter: brightness(1.1); }
@media (max-width: 640px) { .button-row .btn { width: 100%; white-space: normal; line-height: 1.3; padding: 14px 20px !important; } }
.site-footer nav a { display: inline-block; padding: 12px 0; }
.site-footer .brand, .site-header .brand { min-height: 44px; }

/* ---- References: block layout (a grid split the inline text/<em>/<a> into separate cells) ---- */
.refs li { display: block !important; position: relative; padding-left: 52px !important; line-height: 1.6; border-top-color: var(--hair) !important; }
.refs li::before { position: absolute; left: 0; top: 14px; color: var(--iris) !important; }
.refs a { white-space: nowrap; }

/* ---- Wordmark: neutralize the old gradient text-clip + wide tracking from the article base CSS ---- */
.site-header .brand, .site-footer .brand { letter-spacing: -.01em !important; font-size: 18px !important; }
.site-header .brand span, .site-footer .brand span { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; -webkit-text-fill-color: currentColor !important; letter-spacing: -.01em !important; }
.site-header .brand .dot, .site-footer .brand .dot { color: var(--iris) !important; }

.section h2, .section-inner h2, .section-inner h3 { text-wrap: balance; }
.hero-visual [class$="-map"] { background: transparent !important; border: 0 !important; box-shadow: none !important; }