/* ANIMA MYSTICA / SPIRIT
   Spirit article image adjustments + Spirit hub design.
   All category-specific rules are scoped to Spirit classes. */

/* ==========================================================================
   ARTICLE IMAGES
   ========================================================================== */

.mysticism-spirit-article .spirit-article-figure{
  width:min(100%,360px);
  margin:30px auto;
}

.mysticism-spirit-article .spirit-article-figure img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  margin:0 auto;
}

/* ==========================================================================
   HUB
   Black-based hub. Hero reuses the same spirit.webp image used by the
   Mysticism FIELDS Spirit card.
   ========================================================================== */

.category-mysticism #pagebody.mysticism-spirit-hub{
  max-width:1100px;
  margin:0 auto;
  padding:22px 16px 44px;
  color:#d4d9df;
  background:#05070b;
}

.mysticism-spirit-hub .spirit-hub-hero{
  margin:0 0 26px;
  overflow:hidden;
  border:1px solid rgba(156,178,204,.22);
  background:#05070b;
}

.mysticism-spirit-hub .spirit-hub-hero-figure{
  position:relative;
  height:390px;
  margin:0;
  overflow:hidden;
  background:#020305;
}

.mysticism-spirit-hub .spirit-hub-hero-figure::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(2,4,8,.05),
    rgba(2,5,10,.18) 58%,
    rgba(2,5,10,.58)
  );
}

.mysticism-spirit-hub .spirit-hub-hero-figure img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 46%;
  filter:brightness(.88) saturate(.82) contrast(1.04);
}

.mysticism-spirit-hub .spirit-hub-hero-copy{
  padding:20px 26px 24px;
  border-top:1px solid rgba(156,178,204,.13);
  background:#070a10;
}

.mysticism-spirit-hub .spirit-hub-kicker,
.mysticism-spirit-hub .spirit-hub-section-kicker,
.mysticism-spirit-hub .spirit-hub-section-heading > p,
.mysticism-spirit-hub .spirit-hub-group-heading > p{
  margin:0 0 8px!important;
  color:#8fa9c2;
  font-size:10px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.18em;
}

.mysticism-spirit-hub .spirit-hub-hero-copy h1{
  margin:0 0 10px!important;
  color:#eef3f7!important;
  font:400 clamp(30px,4vw,44px)/1.3 "Noto Serif JP","Yu Mincho",Georgia,serif!important;
}

.mysticism-spirit-hub .spirit-hub-hero-copy > p:last-child{
  margin:0!important;
  color:#c8d1d9;
  font-size:14px;
  line-height:1.9;
}

.mysticism-spirit-hub .spirit-hub-introduction,
.mysticism-spirit-hub .spirit-hub-contents{
  margin:0 0 24px;
  padding:22px 20px;
  border:1px solid rgba(156,178,204,.13);
  background:#080c12;
}

.mysticism-spirit-hub .spirit-hub-introduction h2,
.mysticism-spirit-hub .spirit-hub-section-heading h2{
  margin:0 0 12px!important;
  color:#eaf0f4!important;
}

.mysticism-spirit-hub .spirit-hub-introduction p{
  color:#c3cbd2;
  line-height:1.95;
}

.mysticism-spirit-hub .spirit-hub-group{
  margin:24px 0 0;
}

.mysticism-spirit-hub .spirit-hub-group:first-of-type{
  margin-top:18px;
}

.mysticism-spirit-hub .spirit-hub-group-heading{
  margin:0 0 13px;
}

.mysticism-spirit-hub .spirit-hub-group-heading h3{
  margin:0!important;
  color:#e3e9ee!important;
  font:400 20px/1.5 "Noto Serif JP","Yu Mincho",Georgia,serif!important;
}

.mysticism-spirit-hub .spirit-hub-card-list .mysticism-card{
  border-color:rgba(156,178,204,.14);
  background:linear-gradient(105deg,rgba(14,22,32,.96),rgba(8,13,21,.98));
}

.mysticism-spirit-hub .spirit-hub-card-list .mysticism-card-no,
.mysticism-spirit-hub .spirit-hub-card-list .mysticism-card-arrow{
  color:#95aec5;
}

.mysticism-spirit-hub .spirit-hub-card-list .mysticism-card-body strong{
  color:#e8eef3;
}

.mysticism-spirit-hub .spirit-hub-card-list .mysticism-card-body small{
  color:#b7c1ca;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media(max-width:700px){
  .mysticism-spirit-article .spirit-article-figure{
    width:100%;
  }

  .category-mysticism #pagebody.mysticism-spirit-hub{
    padding:14px 10px 34px;
  }

  .mysticism-spirit-hub .spirit-hub-hero-figure{
    height:250px;
  }

  .mysticism-spirit-hub .spirit-hub-hero-copy,
  .mysticism-spirit-hub .spirit-hub-introduction,
  .mysticism-spirit-hub .spirit-hub-contents{
    padding:18px 16px;
  }

  .mysticism-spirit-hub .spirit-hub-group-heading h3{
    font-size:18px!important;
  }
}