/* Jaspen — charcoal cloudscape, warm ivory and restrained bronze.
   Kept separate from the legacy page styles so the original content and layout
   remain untouched while the artwork becomes the shared visual foundation. */
html:root {
  color-scheme: dark;
  --cloud-ink: #181816;
  --cloud-panel: rgba(25, 25, 23, .76);
  --cloud-panel-strong: rgba(22, 22, 20, .9);
  --cloud-paper: #f0ece3;
  --cloud-muted: #c2bbb0;
  --cloud-dim: #9e968a;
  --cloud-bronze: #aa916b;
  --cloud-line: rgba(221, 210, 191, .18);
  --one-ink: #f0ece3;
  --one-muted: #c2bbb0;
  --one-faint: #9e968a;
  --one-gold: #aa916b;
  --one-gold-deep: #d1b78b;
  --one-gold-light: #dcc49c;
  --one-line: rgba(221, 210, 191, .18);
  --one-paper: #1b1b19;
  --one-paper-soft: rgba(25, 25, 23, .9);
  --one-wash: #242320;
  --one-shadow: 0 16px 42px rgba(0, 0, 0, .24);
  --gold-deep: #d1b78b;
}

html {
  background: #171715 !important;
  scroll-behavior: smooth;
}

html body {
  isolation: isolate;
  color: var(--cloud-paper) !important;
  background: transparent !important;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -3.5%;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(17, 17, 16, .73), rgba(21, 20, 18, .65) 48%, rgba(16, 16, 15, .82)),
    url("../attached_assets/generated_images/charcoal-cloudscape.jpg");
  background-size: cover;
  background-position: center calc(50% + var(--cloud-shift, 0px));
  background-repeat: no-repeat;
  transform: translateZ(0);
}

/* Homepage-only reference mood; standalone legal pages retain their artwork. */
body:has(#main-site) {
  --homepage-opening-background:
    linear-gradient(180deg, rgba(17, 17, 16, .18), rgba(21, 20, 18, .1) 48%, rgba(16, 16, 15, .24)),
    url("../attached_assets/generated_images/intro-storm-clouds.jpg");
}

body:has(#main-site)::before {
  background-image: var(--homepage-opening-background);
}

/* Retire the former tree art/leaf layer visually without touching its asset. */
body > .hero-art-layer,
body > .falling-leaves {
  display: none !important;
}

body #main-site,
body #giveaway-entry-page,
body #education-page {
  color: var(--cloud-paper) !important;
  background: transparent !important;
}

body #main-site > section:where(#hero-section, .homepage-chapter),
body #main-site > div:where(#mentorship, #giveaway-over, #socials, #framework),
body #main-site :where(#mentorship, #framework).full-section,
body #main-site #hero-section,
body #main-site #mentorship,
body #main-site #giveaway-over,
body #main-site .about-social-section,
body #main-site #framework,
body #main-site #site-footer,
body #giveaway-entry-page,
body #education-page {
  background-color: transparent !important;
  background-image: none !important;
}

body #main-site :where(#hero-section, #mentorship, #socials, #framework, #giveaway-over, #giveaway-entry-page, #education-page) h1,
body #main-site :where(#hero-section, #mentorship, #socials, #framework, #giveaway-over, #giveaway-entry-page, #education-page) h2,
body #main-site :where(#hero-section, #mentorship, #socials, #framework, #giveaway-over, #giveaway-entry-page, #education-page) h3,
body #main-site :where(#hero-section, #mentorship, #socials, #framework, #giveaway-over, #giveaway-entry-page, #education-page) h4,
body #main-site .section-title,
body #main-site .about-title,
body #main-site .framework-core strong,
body #giveaway-entry-page h1,
body #giveaway-entry-page h2,
body #education-page h1,
body #education-page h2 {
  color: var(--cloud-paper) !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .25) !important;
}

body #main-site :where(#hero-section, #mentorship, #socials, #framework, #giveaway-over, #site-footer, #giveaway-entry-page, #education-page) p,
body #main-site :where(#mentorship, #socials, #framework, #giveaway-entry-page, #education-page) li,
body #main-site .about-copy,
body #main-site .framework-intro,
body #main-site .feature-card p,
body #giveaway-entry-page p,
body #giveaway-entry-page label,
body #education-page p {
  color: var(--cloud-muted) !important;
}

body #main-site .section-eyebrow,
body #main-site .about-kicker,
body #main-site .about-principles,
body #main-site .framework-core span {
  color: #c0a77d !important;
  text-shadow: none !important;
}

/* Original header geometry retained; its compact dark glass finish joins the art. */
body #main-nav,
body #giveaway-entry-page > div:first-child,
body #education-page > div:first-child {
  background: rgba(19, 19, 18, .88) !important;
  border-color: rgba(211, 195, 168, .19) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(16px) saturate(.8) !important;
  -webkit-backdrop-filter: blur(16px) saturate(.8) !important;
}

body #main-nav > div:first-child span,
body #giveaway-entry-page > div:first-child > span,
body #education-page > div:first-child > span {
  color: var(--cloud-paper) !important;
}

body #main-nav #nav-pill > a:not(.nav-discord-btn):not(.nav-yt-btn):not(.nav-ig-btn) {
  color: #ded7cb !important;
}

body #main-nav #nav-pill > a:not(.nav-discord-btn):not(.nav-yt-btn):not(.nav-ig-btn):hover,
body #main-nav #nav-pill > a:not(.nav-discord-btn):not(.nav-yt-btn):not(.nav-ig-btn):focus-visible {
  color: #f3eee5 !important;
  background: rgba(201, 178, 140, .1) !important;
}

body #main-nav .nav-divider {
  background: rgba(221, 210, 191, .28) !important;
}

/* Calls to action remain unmistakable, but no longer read as bright gold tiles. */
body #main-nav .nav-discord-btn,
body #main-site #hero-cta-block > a,
body #main-site .btn-discord,
body #education-page a[href*="youtube.com/@jaspentrades"] {
  color: var(--cloud-paper) !important;
  background: rgba(37, 36, 32, .92) !important;
  border: 1px solid rgba(192, 167, 125, .55) !important;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .28) !important;
}

body #main-site #hero-cta-block > a *,
body #main-site .btn-discord * {
  color: var(--cloud-paper) !important;
}

body #main-nav .nav-discord-btn:hover,
body #main-site #hero-cta-block > a:hover,
body #main-site .btn-discord:hover,
body #education-page a[href*="youtube.com/@jaspentrades"]:hover {
  color: #fffaf1 !important;
  background: rgba(66, 59, 47, .96) !important;
  border-color: rgba(220, 193, 148, .82) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .38) !important;
  transform: translateY(-2px);
}

body #main-nav .nav-yt-btn,
body #main-nav .nav-ig-btn {
  background: rgba(36, 35, 32, .88) !important;
  border-color: var(--cloud-line) !important;
}

body #main-nav .nav-yt-btn svg {
  fill: #d2c4aa !important;
  stroke: none !important;
}

body #main-nav .nav-ig-btn svg {
  fill: none !important;
  stroke: #d2c4aa !important;
}

body #hero-section {
  border-color: var(--cloud-line) !important;
}

/* Match the legacy selectors' specificity, including nested hero text. */
body #main-site #hero-section h1 {
  color: var(--cloud-paper) !important;
  text-shadow: none !important;
}
body #main-site #hero-section h1 span {
  color: #dcc49c !important;
}
body #main-site #hero-section p,
body #main-site #hero-section h1 + p,
body #main-site #hero-section .trust-badge-sub,
body #main-site #hero-section > div:first-of-type > div:first-child > div > div:nth-child(3) {
  color: var(--cloud-muted) !important;
}
body #main-site #hero-section .trust-badge-title,
body #main-site #hero-section > div:first-of-type > div:first-child > div,
body #main-site #hero-section > div:first-of-type > div:first-child > div > div:nth-child(2),
body #main-site #main-nav .nav-discord-btn {
  color: var(--cloud-paper) !important;
}
html body #main-site #giveaway-over h2,
html body #main-site #main-nav .nav-discord-btn .nav-discord-text,
html body #main-site #main-nav .nav-discord-btn svg,
html body #giveaway-entry-page > div:nth-child(2) h1,
html body #giveaway-entry-page > div:nth-child(3) h2,
html body #giveaway-entry-page > div:nth-child(3) strong,
html body #giveaway-entry-page > div:nth-child(3) div[style*="font-weight:900"] {
  color: var(--cloud-paper) !important;
}

html body #main-site #giveaway-over .giveaway-over-copy,
html body #main-site #site-footer .footer-copy,
html body #main-site #site-footer .footer-social-label,
html body #main-site #site-footer p,
html body #education-page > div:nth-child(2) > div:first-child > p,
html body #giveaway-entry-page > div:nth-child(2) p,
html body #giveaway-entry-page > div:nth-child(2) p strong,
html body #giveaway-entry-page > div:nth-child(3) p {
  color: var(--cloud-muted) !important;
}

html body #education-page > div:nth-child(2) > div:first-child > div:first-child,
html body #education-page a[href*="discord.gg"],
html body #main-site #site-footer > div > div:last-child a {
  background: var(--cloud-panel-strong) !important;
  color: var(--cloud-paper) !important;
  border-color: var(--cloud-line) !important;
}

html body #main-site #site-footer > div > div:last-child a svg {
  color: var(--cloud-paper) !important;
}

html body #main-site #main-nav .nav-discord-btn svg,
html body #main-site #site-footer > div > div:last-child a svg[fill="currentColor"] {
  fill: currentColor !important;
}

html body #main-site #site-footer > div > div:last-child a svg[fill="none"] {
  fill: none !important;
  stroke: currentColor !important;
}

html body #main-site #giveaway-over > div {
  background: var(--cloud-panel) !important;
  border-color: var(--cloud-line) !important;
}

html body #giveaway-entry-page button:disabled {
  background: rgba(65, 43, 38, .88) !important;
  color: var(--cloud-muted) !important;
  border-color: rgba(185, 117, 93, .35) !important;
}

/* Light-era component surfaces become smoked glass. */
body #main-site .feature-card,
body #main-site :where(.find-me-panel) .social-card,
body #main-site .framework-node,
body #main-site .framework-core,
body #main-site .find-me-panel,
body #main-site .payout-card,
body #giveaway-entry-page > div:nth-child(3) > div,
body #giveaway-entry-page [style*="background:rgba(0,200,215"],
body #giveaway-entry-page [style*="background:rgba(255,255,255"],
body #giveaway-entry-page [style*="background:#fff"],
body #education-page .edu-video-card {
  color: var(--cloud-paper) !important;
  background: var(--cloud-panel) !important;
  border-color: var(--cloud-line) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .24) !important;
}

body #main-site .feature-card:hover,
body #main-site :where(.find-me-panel) .social-card:hover,
body #main-site .framework-node:hover {
  background: rgba(37, 36, 32, .89) !important;
  border-color: rgba(198, 173, 133, .52) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .32) !important;
}

body #main-site .feature-card h3,
body #main-site :where(.find-me-panel) .social-name,
body #main-site .about-copy strong,
body #main-site .framework-node,
body #main-site .framework-core span,
body #main-site .find-me-panel .section-title {
  color: var(--cloud-paper) !important;
}

body #main-site .feature-card p,
body #main-site .about-principles,
body #main-site .framework-intro,
body #main-site .about-copy,
body #main-site footer:where(#site-footer) .footer-copy,
body #main-site footer:where(#site-footer) .footer-social-label,
body #main-site footer:where(#site-footer) p {
  color: var(--cloud-muted) !important;
}

body #main-site footer:where(#site-footer),
body #main-site .about-social-section,
body #main-site #framework,
body #main-site #mentorship,
body #main-site #giveaway-over {
  border-color: var(--cloud-line) !important;
}

body #main-site .payout-badge,
body #main-site .coming-soon-badge,
body #main-site footer:where(#site-footer) .footer-legal-button {
  color: #e7dac2 !important;
  background: rgba(113, 92, 60, .58) !important;
  border-color: rgba(196, 169, 124, .42) !important;
  box-shadow: none !important;
}

body #main-site .framework-wheel {
  border-color: rgba(194, 168, 128, .5) !important;
}
body #main-site .framework-wheel::before,
body #main-site .framework-wheel::after {
  background: rgba(194, 168, 128, .3) !important;
}
body #main-site .framework-core {
  background: rgba(60, 53, 42, .88) !important;
}
body #main-site .framework-core strong {
  color: #dcc49c !important;
}

body #giveaway-entry-page > div:first-child button,
body #education-page > div:first-child button {
  color: var(--cloud-paper) !important;
  background: rgba(33, 32, 29, .94) !important;
  border-color: var(--cloud-line) !important;
}

body #main-site .giveaway-over-copy .giveaway-discord {
  color: #d1b78b !important;
  text-shadow: none !important;
}

body #main-site .divider {
  background: rgba(188, 160, 119, .75) !important;
}

body #main-site footer:where(#site-footer) a,
body #main-site .giveaway-over-copy a,
body #giveaway-entry-page a,
body #education-page a:not([href*="youtube.com/@jaspentrades"]) {
  color: #d4bd96 !important;
}

body #main-site .msg-username,
body #main-site .trust-badge-title,
body #main-site .trust-badge-sub,
body #main-site .hero-eyebrow {
  color: var(--cloud-paper) !important;
}

body #main-site .discord-preview-wrap,
body #main-site .discord-topbar,
body #main-site .discord-footer {
  border-color: rgba(221, 210, 191, .12) !important;
}

body #giveaway-entry-page input,
body #giveaway-entry-page select,
body #giveaway-entry-page textarea,
body #education-page input,
body #education-page select,
body #education-page textarea {
  color: var(--cloud-paper) !important;
  background: rgba(20, 20, 19, .82) !important;
  border-color: var(--cloud-line) !important;
  box-shadow: none !important;
}

body #giveaway-entry-page input::placeholder,
body #giveaway-entry-page textarea::placeholder {
  color: #9e968a !important;
  opacity: 1;
}

body #main-site :where(.find-me-panel) .social-icon {
  background: rgba(36, 35, 32, .92) !important;
  border-color: var(--cloud-line) !important;
}

body #main-site .fade-in {
  transition: opacity .65s ease, transform .65s ease !important;
}

body #main-site button,
body #main-site a,
body #giveaway-entry-page button,
body #education-page a,
body #education-page button {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease,
    box-shadow .2s ease, transform .2s ease !important;
}

/* Standalone legal pages retain their copy and reading measure, with the same
   charcoal / warm-white language as the main community. */
body:has(> .wrap) {
  min-height: 100vh;
  color: var(--cloud-paper) !important;
  background: #1a1a18 !important;
}
body:has(> .wrap) .wrap {
  color: var(--cloud-paper) !important;
}
body:has(> .wrap) .wrap h1,
body:has(> .wrap) .wrap h2,
body:has(> .wrap) .wrap .card-text .title {
  color: var(--cloud-paper) !important;
}
body:has(> .wrap) .wrap p,
body:has(> .wrap) .wrap .card-text .desc,
body:has(> .wrap) .wrap .effective,
body:has(> .wrap) .wrap .footer-note,
body:has(> .wrap) .wrap .sub {
  color: var(--cloud-muted) !important;
}
body:has(> .wrap) .wrap a,
body:has(> .wrap) .wrap .eyebrow,
body:has(> .wrap) .wrap .card-arrow {
  color: #d1b78b !important;
}
body:has(> .wrap) .wrap .card {
  background: rgba(34, 33, 30, .86) !important;
  border: 1px solid var(--cloud-line) !important;
}
body:has(> .wrap) .wrap .card:hover {
  background: rgba(48, 45, 39, .94) !important;
  border-color: rgba(198, 173, 133, .55) !important;
}
body:has(> .wrap) .wrap .divider,
body:has(> .wrap) .wrap .eyebrow::before {
  background: rgba(188, 160, 119, .72) !important;
}
body:has(> .wrap) .wrap strong {
  color: #eee6d8 !important;
}

/* Keep the full Discord screenshot in a compact, uncropped preview. */
html body #main-site #hero-section #hero-cta-block {
  margin-top: 1rem !important;
}
html body #main-site #hero-section #hero-cta-block > a {
  margin-bottom: .75rem !important;
}
html body #main-site #hero-section .hero-discord-preview {
  width: min(100%, 360px) !important;
  margin-inline: auto;
  flex-shrink: 0;
}
html body #main-site #hero-section .hero-discord-preview-badge {
  top: 8px !important;
  right: 8px !important;
  font-size: .65rem !important;
  padding: .25rem .6rem !important;
}

/* Short screens need less hero spacing so the preview stays above the fold. */
@media (max-height: 800px) {
  html body #main-site #hero-section {
    padding-top: 7rem !important;
    padding-bottom: 2rem !important;
  }
  html body #main-site #hero-section > div:first-of-type {
    padding-block: .75rem !important;
  }
  html body #main-site #hero-section h1 {
    font-size: clamp(2rem, min(9vw, 7svh), 4rem) !important;
  }
  html body #main-site #hero-section h1 + p {
    margin-bottom: 1rem !important;
  }
  html body #main-site #hero-section .hero-discord-preview {
    width: min(100%, 360px, 36svh) !important;
  }
}

@media (max-width: 767px) and (max-height: 600px) {
  html body #main-site #hero-section {
    padding-top: 7.5rem !important;
  }
  html body #main-site #hero-section > div:first-of-type > div:first-child {
    margin-bottom: .5rem !important;
  }
  html body #main-site #hero-section h1 + p {
    font-size: 1rem !important;
    margin-bottom: .5rem !important;
  }
  html body #main-site #hero-section #hero-cta-block {
    margin-top: .5rem !important;
    gap: .35rem;
  }
  html body #main-site #hero-section #hero-cta-block > a {
    margin-bottom: 0 !important;
  }
}

/* Only the main homepage Discord CTA gets the bright gold treatment. */
html body #main-site #hero-section #hero-cta-block > a {
  background: linear-gradient(135deg, #f3d995, #d5aa4f 55%, #b9872b) !important;
  color: #211708 !important;
  border-color: #f0cd79 !important;
  box-shadow: 0 0 20px rgba(225, 177, 70, .5),
    0 0 48px rgba(203, 149, 40, .28),
    inset 0 1px 0 rgba(255, 244, 205, .65) !important;
}
html body #main-site #hero-section #hero-cta-block > a * {
  color: #211708 !important;
}
html body #main-site #hero-section #hero-cta-block > a:hover,
html body #main-site #hero-section #hero-cta-block > a:focus-visible {
  background: linear-gradient(135deg, #ffe9ae, #e5bb62 55%, #ca983b) !important;
  box-shadow: 0 0 28px rgba(239, 193, 86, .65),
    0 0 62px rgba(218, 164, 52, .38),
    inset 0 1px 0 rgba(255, 248, 225, .8) !important;
}
html body #main-site #hero-section #hero-cta-block > a:focus-visible {
  outline: 2px solid #fff0c8;
  outline-offset: 5px;
}

@media (max-width: 767px) {
  body::before {
    inset: -1%;
    background-position: center calc(50% + var(--cloud-shift, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body #main-site .fade-in { opacity: 1 !important; transform: none !important; }
  body *,
  body *::before,
  body *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}