/* ============================================================
   TORUS — HARMONY LAYER
   Marries the Seven-Color web theme with the Torus Publishing
   System. Additive refinements only: color hierarchy, typography
   hierarchy, publishing ornaments, celebration assets, reduced
   visual noise. No token rewrites, no layout changes.
   Load after style.css.
   ============================================================ */

:root {
  /* ── Publishing accents (from torus-publishing color-system) ── */
  --pub-gold:        #C69A3E;   /* Golden Light — celebration only  */
  --pub-gold-deep:   #9D7B35;   /* engraving / text-safe gold       */
  --pub-gold-tint:   #F5ECDD;   /* 10% panel tint                   */
  --pub-stone:       #A79F92;   /* quiet structure                  */
  --pub-stone-deep:  #6E675C;   /* secondary text, diagram lines    */
  --pub-stone-tint:  #F2EDE6;   /* neutral panel tint               */
  --pub-earth:       #B0764B;   /* Warm Earth — parent warmth       */
  --pub-green:       #3F6B52;   /* Forest Green — growth            */

  /* Calmer 3-stop identity gradient for text emphasis
     (full 6-stop rainbow reserved for the footer ribbon) */
  --gradient-torus-calm: linear-gradient(100deg,
    var(--origin) 0%, var(--journey) 55%, var(--imagination) 100%);
}

/* ════════════════════════════════════════════════════════════
   1. TYPOGRAPHY HIERARCHY
   ════════════════════════════════════════════════════════════ */

.section-heading,
.hero-title,
.page-hero h1,
.inner-cta-strip h2,
.curr-hero h1 {
  text-wrap: balance;
  letter-spacing: .01em;
}

.section-sub,
.hero-desc,
.page-hero p {
  text-wrap: pretty;
}

/* Gradient emphasis on selected words only — calmer 3-stop sweep */
.hero-title .highlight {
  background: var(--gradient-torus-calm);
  background-clip: text;
  -webkit-background-clip: text;
}

/* Eyebrow labels step back so headings lead the hierarchy */
.section-label {
  color: var(--pub-stone-deep);
  letter-spacing: .18em;
  font-size: .72rem;
}

/* Publishing crest replaces the plain rule beside labels */
.section-label::before,
.section-label::after,
.coaches-header .section-label::after,
.testimonials-header .section-label::after,
.achievements-header .section-label::after,
.cta-inner .section-label::after,
.page-section-head .section-label::after,
.page-hero .section-label::after,
.curr-section-head .section-label::after {
  width: 30px;
  height: 8px;
  background: url("../images/publishing/divider-crest-gold.svg") no-repeat center / contain;
  opacity: .9;
}

/* Serif display gets publishing letterpress feel on big numerals */
.stat-value,
.about-stat-value,
.achievement-count,
.inst-home-stat-value,
.prog-price-amount,
.program-price {
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   2. COLOR HIERARCHY
   Interactive = Origin purple (unchanged identity).
   Celebration = Golden Light (certificates, stars, trophies).
   Information = quiet ink & stone. One voice per meaning.
   ════════════════════════════════════════════════════════════ */

/* Plain counts read in calm ink — numbers are information */
.stat-value,
.about-stat-value,
.inst-home-stat-value {
  color: var(--text-primary);
}

/* Celebration surfaces breathe gold — never everyday purple */
.achievement-count       { color: var(--pub-gold-deep); }
.testimonial-stars       { color: var(--pub-gold); }
.testimonial-quote       { color: var(--pub-gold); opacity: .55; }
.realm-card-footer .realm-achievement,
.realm-card .realm-achievement { color: var(--pub-gold-deep); }
.exit-popup-icon         { color: var(--pub-gold-deep); }
.sticky-cta-emoji        { color: var(--pub-gold-deep); }

.achievement-tile:hover  { border-color: rgba(198,154,62,.45); }
.achievement-tile        { position: relative; }
.achievement-tile::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 1.1rem;
  transform: translateX(-50%);
  width: 56px; height: 9px;
  background: url("../images/publishing/divider-crest-gold.svg") no-repeat center / contain;
  opacity: .45;
}

/* Achievements section: gold aura instead of purple */
.achievements::before {
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(198,154,62,.07) 0%, transparent 65%);
}

/* Prices are facts, not decorations — ink with a gold whisper */
.program-price,
.prog-price-amount { color: var(--text-primary); }

/* Secondary meta steps down to stone */
.stat-label,
.about-stat-label,
.achievement-label,
.inst-home-stat-label,
.trust-marquee-label { color: var(--pub-stone-deep); }

/* Testimonial byline warms toward parents (Warm Earth) */
.testimonial-author span,
.testimonial-location { color: var(--pub-earth); opacity: .85; }

/* Seven-color identity, one clear job each: feature icons take
   successive spectrum tints at publishing calm (≤12% surfaces) */
.why-features .feature-item:nth-child(1) .feature-icon {
  background: rgba(110,78,242,.09);  border-color: rgba(110,78,242,.28);
}
.why-features .feature-item:nth-child(2) .feature-icon {
  background: rgba(230,179,37,.12);  border-color: rgba(198,154,62,.38);
}
.why-features .feature-item:nth-child(3) .feature-icon {
  background: rgba(49,183,106,.10);  border-color: rgba(49,183,106,.30);
}
.why-features .feature-item:nth-child(4) .feature-icon {
  background: rgba(45,140,255,.09);  border-color: rgba(45,140,255,.28);
}

/* ════════════════════════════════════════════════════════════
   3. REDUCED VISUAL NOISE / SATURATION
   ════════════════════════════════════════════════════════════ */

/* Hero rainbow glow: quieter, warmer */
.hero::after {
  background: radial-gradient(ellipse 60% 80% at 70% 40%, rgba(110,78,242,.06) 0%, transparent 65%);
}

/* Hero copy legibility: the cream scrim was painted beneath the
   .hero-bg child, leaving the paragraph raw on the artwork. Lift it
   above the illustration — but gentler than the original wash, so
   the dreamlike full-bleed art still breathes on the right. */
.hero::before {
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(240,234,214,.82) 0%,
      rgba(240,234,214,.62) 42%,
      rgba(240,234,214,.28) 60%,
      rgba(240,234,214,.06) 74%,
      transparent 88%),
    linear-gradient(0deg, rgba(240,234,214,.35) 0%, transparent 22%);
}

/* Inner-page checkerboards fade to a whisper */
.page-hero::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(110,78,242,.06) 0%, transparent 70%),
    repeating-conic-gradient(rgba(110,78,242,.028) 0% 25%, transparent 0% 50%);
  background-size: 100% 100%, 48px 48px;
}
.page-hero::after {
  background: radial-gradient(ellipse 60% 80% at 80% 40%, rgba(110,78,242,.06) 0%, transparent 65%);
}

/* Country marquee: neutral publishing chips, not purple */
.trust-marquee-track span {
  background: var(--surface-card);
  border-color: var(--surface-border);
  color: var(--pub-stone-deep);
}

/* Conversion strip: warm parchment invitation instead of purple wash */
.conv-strip {
  background: linear-gradient(135deg, var(--pub-gold-tint) 0%, rgba(245,236,221,.35) 100%);
  border-top-color: rgba(198,154,62,.35);
  border-bottom-color: rgba(198,154,62,.35);
}

/* Softer everyday shadows & glows */
.btn-gold {
  box-shadow: 0 5px 16px rgba(110,78,242,.18);
}
.btn-gold:hover {
  box-shadow: 0 9px 24px rgba(110,78,242,.26);
}

/* FAQ chevron & hover accents: stone until touched */
.faq-item:hover { border-color: rgba(110,78,242,.22); }

/* Program-card hover: lift on cream, not brighter purple */
.coach-card:hover,
.about-value-card:hover,
.prog-row:hover { border-color: rgba(110,78,242,.25); }
.prog-row:hover { box-shadow: var(--shadow-md); }

/* ════════════════════════════════════════════════════════════
   4. PUBLISHING ORNAMENTS — decorative borders & dividers
   ════════════════════════════════════════════════════════════ */

/* Quote card becomes a small certificate: hairline frame + corners */
.about-quote-card {
  border-color: var(--pub-stone);
  box-shadow: inset 0 0 0 1px rgba(167,159,146,.0), var(--shadow-sm);
  background-image:
    url("../images/publishing/corner-arc-gold-tl.svg"),
    url("../images/publishing/corner-arc-gold-br.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: 14px 14px, calc(100% - 14px) calc(100% - 14px);
  background-size: 34px 34px, 34px 34px;
}
.about-quote-card::before { display: none; }
.about-quote-icon { color: var(--pub-gold-deep); }

/* Booking form: quiet certificate corners in stone */
.booking-form-card,
.exit-popup-card {
  background-image:
    url("../images/publishing/corner-arc-tl.svg"),
    url("../images/publishing/corner-arc-br.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: 12px 12px, calc(100% - 12px) calc(100% - 12px);
  background-size: 28px 28px, 28px 28px;
}

/* Section transitions: dawnlands horizon rule under centered heads */
.page-section-head,
.curr-section-head,
.testimonials-header,
.achievements-header,
.coaches-header {
  position: relative;
}

/* Footer: publishing colophon — ribbon softened, seal added */
.footer::before {
  height: 2px;
  opacity: .75;
}

.footer-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  padding: 1.75rem 0 .5rem;
}
.footer-seal::before,
.footer-seal::after {
  content: '';
  width: min(160px, 22vw);
  height: 8px;
  background: url("../images/publishing/divider-crest-stone.svg") no-repeat center / contain;
  opacity: .55;
}
.footer-seal img {
  width: 64px;
  height: 64px;
}
.footer-seal-note {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pub-stone-deep);
  margin-bottom: 1.5rem;
}

/* ════════════════════════════════════════════════════════════
   5. REALM VISUALS & ARTWORK PLACEMENTS (CSS-only backdrops)
   ════════════════════════════════════════════════════════════ */

/* Curriculum — Four Orders: the floating realm-island archipelago
   drifts faintly behind the kingdom map */
#the-four-orders { position: relative; overflow: hidden; }
#the-four-orders::before {
  content: '';
  position: absolute;
  top: 0; right: -8%;
  width: 58%;
  height: 100%;
  background: url("../images/illustrations/floating-islands-network.png") no-repeat center top / contain;
  opacity: .10;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 35%);
          mask-image: linear-gradient(90deg, transparent 0%, black 35%);
}
#the-four-orders .container { position: relative; z-index: 1; }

/* About — mission: a child's imagination silhouette warms the story */
.about-split { position: relative; }
.about-split::before {
  content: '';
  position: absolute;
  top: -6%; right: -10%;
  width: 46%;
  height: 112%;
  background: url("../images/illustrations/child-imagination-silhouette.png") no-repeat center / contain;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.about-split > * { position: relative; z-index: 1; }

/* Inner CTA strips: the sunrise chess avenue leads out of every page */
.inner-cta-strip { position: relative; overflow: hidden; }
.inner-cta-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("../images/illustrations/chess-avenue-sunrise.png") no-repeat center 70% / cover;
  opacity: .12;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 55%);
          mask-image: linear-gradient(180deg, transparent 0%, black 55%);
}
.inner-cta-strip-inner { position: relative; z-index: 1; }

/* Testimonials: quiet 64-grid publishing texture behind the cards */
.testimonials { position: relative; }
.testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("../images/publishing/pattern-64grid.svg") repeat top left / 220px 220px;
  opacity: .5;
  pointer-events: none;
}
.testimonials .container { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════
   6. CELEBRATION STRIP (home — achievements section)
   Certificates, seal and mastery emblems from the Publishing System
   ════════════════════════════════════════════════════════════ */

.celebration-strip {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--pub-stone);
  border-radius: var(--radius-lg);
  padding: 2.75rem 3rem;
  position: relative;
  box-shadow: var(--shadow-sm);
  background-image:
    url("../images/publishing/corner-arc-gold-tl.svg"),
    url("../images/publishing/corner-arc-gold-br.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: 14px 14px, calc(100% - 14px) calc(100% - 14px);
  background-size: 34px 34px, 34px 34px;
}

.celebration-cert {
  position: relative;
  display: flex;
  justify-content: center;
}
.celebration-cert img {
  width: 100%;
  max-width: 420px;
  border-radius: 10px;
  border: 1px solid var(--surface-border);
  box-shadow: 0 18px 44px rgba(45,43,66,.14);
  transform: rotate(-1.6deg);
  transition: transform .4s var(--ease-spring);
}
.celebration-strip:hover .celebration-cert img {
  transform: rotate(0deg) translateY(-4px);
}

.celebration-copy .section-label { margin-bottom: .75rem; }

.celebration-title {
  font-family: var(--ff-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: .75rem;
  text-wrap: balance;
}

.celebration-text {
  font-size: .92rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.75rem;
  max-width: 46ch;
}

.celebration-mastery {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.celebration-mastery-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.celebration-mastery-step img {
  width: 52px;
  height: 52px;
  opacity: .9;
}
.celebration-mastery-step span {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pub-stone-deep);
}
.celebration-mastery-arrow {
  color: var(--pub-stone);
  font-size: .85rem;
  margin-top: -1rem;
}

/* ════════════════════════════════════════════════════════════
   7. CURRICULUM — mastery emblems mark the Four Orders
   ════════════════════════════════════════════════════════════ */

.order-mastery-emblem {
  width: 40px;
  height: 40px;
  margin-top: .5rem;
  opacity: .8;
  transition: opacity .3s, transform .3s var(--ease-spring);
}
.realm-row:hover .order-mastery-emblem {
  opacity: 1;
  transform: scale(1.08);
}

/* ════════════════════════════════════════════════════════════
   8. RESPONSIVE & MOTION COURTESY
   ════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .celebration-strip {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1.5rem;
  }
  #the-four-orders::before,
  .about-split::before { display: none; }
}

@media (max-width: 520px) {
  .celebration-mastery { gap: .75rem; }
  .celebration-mastery-step img { width: 42px; height: 42px; }
  .footer-seal::before,
  .footer-seal::after { width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-cert img,
  .order-mastery-emblem { transition: none; }
}