/* The Invisible Mechanism — official palette (loaded last on every page).
   Three layers: Dark Observatory Teal (depth) · Rich Deep Teal (dimension) · Warm Ivory (openness).
   Soft Copper unites them; Champagne for borders and highlights; Charcoal for body text.
   Colour-only: no layout, wording, photograph, video or artwork changes. */
:root{
  --dark:#09282D;        /* Dark Observatory Teal — darkest colour, replaces all navy */
  --rich:#28686A;        /* Rich Deep Teal — visibly lighter, richer */
  --rich-hover:#327A7C;
  --copper:#D8A078;      /* Soft Copper — primary accent */
  --copper-deep:#C58A60; /* hover state for copper buttons */
  --copper-text:#8A5634; /* copper for small text on ivory (readable) */
  --ivory:#F4EDE0;       /* Warm Ivory */
  --champagne:#E9D8B8;   /* Soft Champagne */
  --charcoal:#242A2B;    /* Dark Charcoal */
  /* existing tokens mapped to the official palette */
  --observatory:var(--rich);
  --teal:var(--rich);
  --navy:var(--dark);
  --gold:var(--copper);
  --parchment:var(--ivory);
  --card:#FAF6EE;
  --ink:var(--charcoal);
  --muted:#4F5756;
  --gold-text:var(--copper-text);
  --on-dark:var(--ivory);
  --on-dark-muted:#C9D6D3;
  --line:rgba(40,104,106,.18);
}
body{color:var(--charcoal)}
::selection{background:var(--champagne);color:var(--charcoal)}
h1,h2,h3,h4{color:var(--dark)}
h1 em,h2 em{color:var(--rich)}

/* ---------- Layer 1: Dark Observatory Teal (header, footer, overlays, immersive) ---------- */
.site-header.cosmic-header,.home-clean .home-header{background:var(--dark);border-bottom-color:rgba(233,216,184,.22)}
.home-v2 .home-header{background:linear-gradient(180deg,rgba(9,40,45,.72),rgba(9,40,45,0))}
.cosmic-header .nav-links.open{background:var(--dark)}
@media (max-width:1199px){.cosmic-header .nav-links{background:var(--dark)}.home-clean .home-header{background:var(--dark)}}
.footer.cosmic-footer{background-color:var(--dark);border-top-color:rgba(233,216,184,.18)}
.home-v2 .footer.cosmic-footer{background-color:var(--dark)}
.bg-dark,.business-process,.holiday-details{background:var(--dark)}
.page-hero{background:linear-gradient(90deg,rgba(9,40,45,.9) 0%,rgba(9,40,45,.72) 50%,rgba(9,40,45,.34)),url('reference/hero-clean.webp') center 60% / cover no-repeat}
.page-hero .eyebrow{color:var(--copper)}
.page-hero h1,.page-hero h1 em{color:var(--ivory)}
.page-hero h1 em{color:var(--copper)}
/* homepage world cards keep their artwork; text panels sit on the darkest teal */
.home-v2 .world-tile{background-color:var(--dark)}
.home-v2 .world-tile::before{background:linear-gradient(180deg,rgba(9,40,45,0) 34%,rgba(9,40,45,.6) 50%,var(--dark) 62%,var(--dark) 100%)}
.home-v2 .world-tile .t-label,.home-v2 .world-tile .t-plain,.home-v2 .world-tile .star-rule{color:var(--copper)}
.home-v2 .world-tile .star-rule i{background:rgba(216,160,120,.6)}
.home-v2 .cosmic-footer .footer-motto{color:var(--copper);border-left-color:rgba(216,160,120,.55)}

/* ---------- Layer 2: Rich Deep Teal (heroes, feature sections, panels) ---------- */
.business-page .business-hero{background:var(--rich);border-bottom:3px solid var(--copper)}
.business-page .business-hero .eyebrow,.business-hero .mini-rule{color:var(--champagne)}
.business-page .business-hero h1 em{color:var(--champagne)}
.business-hero-note{background:rgba(9,40,45,.35);border-color:rgba(233,216,184,.4)}
.reference-visual-section{background:var(--rich)}
.reference-visual-layout h2 em,.reference-visual-layout .text-link{color:var(--champagne)}
.reference-visual-layout .eyebrow{color:var(--champagne)}
.world-figure{border-color:var(--champagne)}

/* ---------- Layer 3: Warm Ivory (content, forms, panels) ---------- */
.home-clean,.home-v2 .home-worlds,.cp-section,.jr-section,.sp-reflect,.sp-catch,.sp-zodiac{background-color:var(--ivory)}
.home-v2 .home-worlds{background-image:none}
.home-v2 .home-worlds-label,.home-v2 .home-worlds-label span{color:var(--charcoal)}

/* ---------- Interactive Sample page: alternate layers, no blended teal gradients ---------- */
.sp-hero{background:var(--rich);border-bottom-color:var(--copper)}
.sp-hero h1 em,.sp-hero .eyebrow{color:var(--champagne)}
.sp-book-sec{background:var(--dark)}
.sp-observatory{background:var(--rich)}
.sp-shared{background:var(--dark)}
.sp-cta{background:var(--rich)}
.sp-mode-btn[aria-pressed="true"]{background:var(--copper);color:var(--charcoal)}
.sp-mode{border-color:var(--copper)}
.sp-sky{background:radial-gradient(1px 1px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 20%,#fff8,transparent),radial-gradient(1px 1px at 40% 70%,#fff6,transparent),radial-gradient(1px 1px at 85% 60%,#fff6,transparent),var(--dark)}

/* ---------- Buttons: Soft Copper primary, understated outlines secondary ---------- */
.btn,.cosmic-header .header-action,.home-clean .home-header .header-action,.btn-sample,.service-bottom .btn,.sp-cta .btn:not(.btn-outline),.sp-complete .btn:not(.btn-outline),.reading-card .btn:not(.btn-outline){
  background:var(--copper);border-color:var(--copper);color:var(--charcoal)}
.btn:hover,.btn:focus-visible,.cosmic-header .header-action:hover,.cosmic-header .header-action:focus-visible,.btn-sample:hover,.btn-sample:focus-visible,.service-bottom .btn:hover,.service-bottom .btn:focus-visible,.reading-card .btn:not(.btn-outline):hover{
  background:var(--copper-deep);border-color:var(--copper-deep);color:var(--charcoal);box-shadow:none}
.btn-sample span{color:var(--charcoal)}
.btn-outline,.btn-gold,.reading-card.is-waitlist .btn,.business-waitlists .reading-card .btn-outline,.holiday-announcement .btn{background:transparent;color:var(--dark);border-color:rgba(40,104,106,.6)}
.btn-outline:hover,.btn-gold:hover,.reading-card.is-waitlist .btn:hover,.business-waitlists .reading-card .btn-outline:hover,.holiday-announcement .btn:hover{background:var(--rich);border-color:var(--rich);color:var(--ivory)}
/* outlines on either teal */
.page-hero .btn-outline,.business-page .business-hero .btn-outline,.business-page .business-hero .btn-gold,.business-process .btn,.holiday-details .btn,.sp-cta .btn-outline,.sp-complete .btn-outline,.cp-hero .btn-outline,.cp-hero .btn-gold{background:transparent;color:var(--ivory);border-color:rgba(233,216,184,.65)}
.sp-so-panel .btn-outline{color:var(--dark);border-color:rgba(40,104,106,.6)}
.page-hero .btn-outline:hover,.business-page .business-hero .btn-outline:hover,.business-page .business-hero .btn-gold:hover,.business-process .btn:hover,.holiday-details .btn:hover,.sp-cta .btn-outline:hover,.sp-complete .btn-outline:hover,.cp-hero .btn-outline:hover,.cp-hero .btn-gold:hover{background:rgba(233,216,184,.14);color:var(--ivory);border-color:var(--champagne)}
.home-v2 .t-btn{border-color:var(--copper)}
.home-v2 .t-btn:hover,.home-v2 .t-btn:focus-visible{background:var(--copper);border-color:var(--copper);color:var(--charcoal)}
.cosmic-header .nav-links a:hover,.cosmic-header .nav-links a[aria-current=page]{border-bottom-color:var(--copper)}
.cosmic-header .nav-links .nav-holiday,.cosmic-header .nav-links a.nav-holiday{color:var(--copper)}

/* ---------- Labels, dividers, small accents ---------- */
.eyebrow{color:var(--copper-text)}
.bg-dark .eyebrow,.business-process .eyebrow,.holiday-details .eyebrow,.sp-cta .eyebrow,.sp-book-head .eyebrow,.sp-observatory .eyebrow,.sp-shared .eyebrow{color:var(--copper)}
.star-rule{color:var(--copper)}
.home-v2 .home-hero .star-rule i{background:rgba(233,216,184,.6)}

/* ---------- Forms on ivory ---------- */
.form-card{background:#FBF8F2;border-top-color:var(--copper)}
.field label,.field legend{color:var(--dark)}
.rf-h{color:var(--dark)!important}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--rich);box-shadow:0 0 0 3px rgba(216,160,120,.28)}
.check input,.radio-group input{accent-color:var(--rich)}