:root{--text:#ffffff;--muted:rgba(255,255,255,.8);--bg:#0c0c0c;--ink:#111;--ink-60:#666}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Montserrat', system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;background:var(--bg);color:var(--text)}

/* HERO */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
.hero__bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  background: url('Myste_Tree.jpg') center 20% / cover no-repeat;
  filter: grayscale(100%);
}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.55))}

.bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:28px clamp(16px,4vw,40px)}
.brand{display:flex;align-items:center;gap:14px
  text-decoration:none;
  color:inherit
}
.brand img{height:135px;width:auto;display:block;filter:invert(0)}
.brand span{letter-spacing:.18em;text-transform:uppercase;font-weight:600;font-size:14px;color:var(--text);opacity:.95;font-family:'Montserrat', sans-serif}
.link-top{letter-spacing:.12em;padding-right:16px;text-transform:uppercase;font-size:12px;color:var(--muted);text-decoration:none;font-family:'Montserrat', sans-serif;font-weight:600}
.link-top:hover{opacity:.9}

.center{position:relative;z-index:2;display:grid;place-items:center;padding:0 clamp(16px,5vw,48px)}
.center-inner{text-align:center;max-width:min(90ch,92vw)}

h1{margin:0 0 12px;font-size:clamp(28px,6vw,56px);letter-spacing:.06em;font-weight:600;font-family:'Montserrat', sans-serif}
p.sub{margin:0 0 16px;color:var(--muted);font-size:clamp(14px,2.2vw,18px);font-weight:400;font-family:'Montserrat', sans-serif}
.coming{display:inline-block;margin-top:6px;padding:.6rem 1rem;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:saturate(140%) blur(2px);font-weight:900;font-family:'Montserrat', sans-serif}

/* Sections */
.section{background:#fff;color:var(--ink)}
.wrap{max-width:960px;margin:0 auto;padding:72px 20px}
.statement{display:grid;place-items:center;text-align:center}
.statement p{margin:0 0 16px;font-weight:900;font-size:clamp(22px,4.6vw,44px);line-height:1.22;font-family:'Montserrat', sans-serif}
.statement p.muted{margin-top:40px;font-weight:600;font-size:clamp(18px,3.6vw,34px);opacity:.9}
.statement p.emph{margin-top:4px;font-size:clamp(22px,4.6vw,44px);font-weight:900;font-style:italic}

/* Dark callout */
.alt.dark{background:#C0ADC7;color:#111;text-align:center}
.lead{font-size:clamp(16px,2.4vw,20px);max-width:720px;margin:0 auto 2px;font-family:'Montserrat', sans-serif;font-weight:400;line-height: 28px;}
.btn{display:inline-block;padding:14px 28px;border-radius:8px;background:#111;color:#fff;font-weight:900;text-decoration:none;letter-spacing:.04em;font-family:'Montserrat', sans-serif}

/* Footer block */
.footer{background:#fff;color:var(--ink);text-align:center}
.logo-footer{height:135px;width:auto;display:block;margin:0 auto 24px;filter:invert(1)}
.footer-link{color:var(--ink);text-decoration:none;font-weight:600;font-family:'Montserrat', sans-serif}
.footer .muted{color:var(--ink-60);font-weight:400}

/* Responsiveness */
@media (max-width: 768px){
  .bar{padding:25px 16px}
  .brand img{height:125px}
  h1{font-size:clamp(26px,7.5vw,44px)}
  .wrap{padding:56px 18px}
  .logo-footer{height:115px}
}
@media (min-width: 1200px){
  .wrap{max-width:1100px}
}

/* Respect safe areas */
@supports(padding:max(0px)){
  .bar{padding-inline:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}
/* Schedule page hero background override */
.hero--schedule .hero__bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  background: url('Myste_Pose.jpg') center 30% / cover no-repeat;
  filter: grayscale(100%);
}
/* In case an <img> is present inside hero__bg on schedule page, hide it */
.hero--schedule .hero__bg img{ display:none; }

/* Schedule hero fixed height */
.hero--schedule{
  min-height: 500px;
}

@media (max-width: 768px){
  .bar{
    position: relative;
    justify-content: center;  /* centers the logo */
  }
  .link-top{
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%); /* pin the link to the right without shifting the logo */
  }
}







/* Footer social icons */
.social{
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.social a{
  display: inline-flex;
  width: 36px; height: 36px;  /* tweak size */
  line-height: 0;
}
.social svg{
  width: 100%; height: 100%;
  transition: transform .2s ease, filter .2s ease;
}
.social a:hover svg{ transform: translateY(-2px); filter: saturate(1.15); }
.social a:active svg{ transform: translateY(0); }








/* Fade between 7 colors when this class is present */
.fade7{
  /* easy knobs */
  --fade-duration: 56s;

  /* the 7 colors you wanted */
  --c0:#EBCE4A; /* gold */
  --c1:#427158; /* deep green */
  --c2:#E06E36; /* orange */
  --c3:#795940; /* brown */
  --c4:#C79C67; /* sand */
  --c5:#5755CC; /* indigo */
  --c6:#DF7D5E; /* coral */

  background-color: var(--c0);
  animation: fade7 var(--fade-duration) ease-in-out infinite;
}

@keyframes fade7{
  0%      { background-color: var(--c0); }
  14.285% { background-color: var(--c1); }
  28.571% { background-color: var(--c2); }
  42.857% { background-color: var(--c3); }
  57.142% { background-color: var(--c4); }
  71.428% { background-color: var(--c5); }
  85.714% { background-color: var(--c6); }
  100%    { background-color: var(--c0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .fade7{ animation: none; }
}



/* Fix the home hero background in place (desktop/tablet) */
.hero:not(.hero--schedule) .hero__bg{
  background-attachment: fixed;     /* key line */
}

/* Mobile/touch fallback (iOS Safari doesn't support fixed well) */
@media (max-width: 768px), (hover: none) and (pointer: coarse){
  .hero:not(.hero--schedule) .hero__bg{
    background-attachment: scroll;  /* gracefully disable on touch */
  }
}