/* MysterCharlie v8.7 — Inner-page UI consistency pass
   Shared typography, hero rhythm and spacing for primary navigation pages. */
:root{
  --mc-page-max:1120px;
  --mc-page-gutter:clamp(1.25rem,4vw,4.5rem);
  --mc-hero-top:clamp(5.25rem,7vw,7.25rem);
  --mc-hero-bottom:clamp(3.2rem,4.5vw,4.75rem);
  --mc-hero-title:clamp(3.15rem,4.55vw,5rem);
  --mc-hero-lead:clamp(.98rem,1.15vw,1.08rem);
  --mc-kicker-size:clamp(.68rem,.72vw,.78rem);
  --mc-section-title:clamp(1.9rem,2.7vw,2.65rem);
  --mc-body-size:15px;
}

/* Keep the homepage intentionally more theatrical; these rules only target inner pages. */
body.mc-inner-page{
  font-size:var(--mc-body-size);
}
body.mc-inner-page main{
  min-width:0;
}

/* Shared hero rhythm */
body.mc-page-tools .hero,
body.mc-page-story .hero,
body.mc-page-services .hero,
body.mc-page-faq .hero,
body.mc-page-courses .page-hero,
body.mc-page-blog .blog-hero,
body.mc-page-shop .shop-hero{
  min-height:0!important;
  padding-top:var(--mc-hero-top)!important;
  padding-bottom:var(--mc-hero-bottom)!important;
  padding-left:var(--mc-page-gutter)!important;
  padding-right:var(--mc-page-gutter)!important;
}

body.mc-page-tools .hero,
body.mc-page-story .hero .wrap,
body.mc-page-services .hero .wrap,
body.mc-page-faq .hero-inner,
body.mc-page-courses .page-hero-inner,
body.mc-page-blog .blog-hero-inner,
body.mc-page-shop .shop-wrap{
  width:min(var(--mc-page-max),100%)!important;
  max-width:var(--mc-page-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Eyebrows / kickers */
body.mc-inner-page .eyebrow,
body.mc-page-courses .page-kicker,
body.mc-page-blog .blog-kicker,
body.mc-page-shop .shop-kicker{
  font-size:var(--mc-kicker-size)!important;
  line-height:1.35!important;
  letter-spacing:.24em!important;
  text-transform:uppercase;
  color:var(--gold,#c9a96e)!important;
}

/* Primary inner-page H1 scale */
body.mc-page-tools .hero h1,
body.mc-page-story .hero h1,
body.mc-page-services .hero h1,
body.mc-page-faq .hero h1,
body.mc-page-courses .page-title,
body.mc-page-blog .blog-title,
body.mc-page-shop .shop-hero h1{
  font-family:'Cormorant Garamond','Songti TC','Noto Serif TC','PMingLiU','Microsoft JhengHei',serif!important;
  font-size:var(--mc-hero-title)!important;
  font-weight:300!important;
  line-height:1.08!important;
  letter-spacing:-.018em!important;
  margin-top:.8rem!important;
  margin-bottom:1.1rem!important;
  color:var(--cream,#faf7f0)!important;
}
body.mc-page-tools .hero h1 em{color:var(--gold,#c9a96e)!important}

/* Intro copy */
body.mc-page-tools .hero p,
body.mc-page-story .hero .lead,
body.mc-page-services .hero .lead,
body.mc-page-faq .hero p,
body.mc-page-courses .page-subtitle,
body.mc-page-blog .blog-desc,
body.mc-page-shop .shop-lead{
  max-width:700px!important;
  font-size:var(--mc-hero-lead)!important;
  line-height:1.95!important;
  color:rgba(240,234,216,.68)!important;
}
body.mc-page-tools .hero p{margin-top:1.35rem!important}
body.mc-page-tools .hero-note{font-size:.78rem!important;line-height:1.8!important;margin-top:1rem!important}

/* Consistent secondary headings on primary index pages */
body.mc-page-tools .section-title,
body.mc-page-courses .course-category h2,
body.mc-page-faq .faq-section h2,
body.mc-page-story .content h2,
body.mc-page-services .content h2{
  line-height:1.25;
}

/* Article page: the previous blank area was not Notion latency. The hero copy had
   a .reveal class without an observer on this page, leaving it opacity:0 forever. */
body.mc-page-blog .blog-hero-inner.reveal{
  opacity:1!important;
  transform:none!important;
}
body.mc-page-blog .blog-hero{
  display:block!important;
}
body.mc-page-blog .blog-list-section{
  padding-top:clamp(1.25rem,2vw,2rem)!important;
  padding-left:var(--mc-page-gutter)!important;
  padding-right:var(--mc-page-gutter)!important;
}
body.mc-page-blog .blog-filter,
body.mc-page-blog .blog-list,
body.mc-page-blog .blog-state{
  max-width:var(--mc-page-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Shop should feel related to the other pages while retaining its stronger visual motif. */
body.mc-page-shop .shop-hero h1{max-width:760px}
body.mc-page-shop .shop-toolbar,
body.mc-page-shop .shop-content{
  padding-left:var(--mc-page-gutter)!important;
  padding-right:var(--mc-page-gutter)!important;
}
body.mc-page-shop .shop-toolbar,
body.mc-page-shop .shop-content .product-grid{
  max-width:var(--mc-page-max);
  margin-left:auto;
  margin-right:auto;
}

/* Shared content rhythm: stop each page from inventing a different horizontal edge. */
body.mc-page-tools .section,
body.mc-page-courses .course-page,
body.mc-page-story .content,
body.mc-page-services .content,
body.mc-page-faq .faq-layout{
  padding-left:var(--mc-page-gutter)!important;
  padding-right:var(--mc-page-gutter)!important;
}

@media(max-width:720px){
  :root{
    --mc-page-gutter:1.25rem;
    --mc-hero-top:4.25rem;
    --mc-hero-bottom:2.8rem;
    --mc-hero-title:clamp(2.65rem,13vw,3.7rem);
    --mc-hero-lead:.94rem;
  }
  body.mc-inner-page .mc-site-nav + main{min-height:0}
  body.mc-page-tools .hero h1,
  body.mc-page-story .hero h1,
  body.mc-page-services .hero h1,
  body.mc-page-faq .hero h1,
  body.mc-page-courses .page-title,
  body.mc-page-blog .blog-title,
  body.mc-page-shop .shop-hero h1{
    letter-spacing:-.025em!important;
  }
  body.mc-page-blog .blog-list-section{padding-top:.75rem!important}
}