/* Restored hand-painted imagery for the Chinese astrology experience.
   The CSS background remains a first-render fallback, while the real image
   stays visible and keeps the same arched silhouette as the personal reading. */
.chinese-hero.chinese-hero{
  width:min(calc(100% - 64px),1120px)!important;
  min-height:620px!important;
  margin:clamp(28px,4vw,58px) auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,.88fr) minmax(430px,1.12fr)!important;
  gap:clamp(38px,6vw,78px)!important;
  align-items:center!important;
  isolation:isolate;
  overflow:visible!important;
  color:#2f231d!important;
  background-color:transparent!important;
  background-image:none!important;
}
.chinese-hero.chinese-hero::before{
  content:'';
  grid-column:2;
  grid-row:1;
  z-index:0;
  align-self:stretch;
  min-height:620px;
  border:1px solid rgba(112,67,34,.25);
  border-radius:50% 50% 30px 30px/34% 34% 22px 22px;
  background:#d4c3a3 url('/images/chinese-celestial.webp') 64% center/cover no-repeat;
  box-shadow:0 32px 72px rgba(71,45,23,.18),inset 0 0 0 7px rgba(255,249,233,.22);
  filter:saturate(.88) sepia(.035) contrast(1.035);
}
.chinese-hero.chinese-hero::after{display:none!important}
.chinese-hero.chinese-hero>img{
  position:relative!important;
  inset:auto!important;
  grid-column:2;
  grid-row:1;
  z-index:1;
  align-self:stretch;
  display:block!important;
  width:100%!important;
  height:620px!important;
  min-height:620px!important;
  max-width:none!important;
  max-height:620px!important;
  opacity:1!important;
  visibility:visible!important;
  object-fit:cover!important;
  object-position:64% center!important;
  border:1px solid rgba(112,67,34,.25)!important;
  border-radius:50% 50% 30px 30px/34% 34% 22px 22px!important;
  background:#d4c3a3!important;
  box-shadow:0 32px 72px rgba(71,45,23,.18),inset 0 0 0 7px rgba(255,249,233,.22)!important;
  filter:saturate(.88) sepia(.035) contrast(1.035)!important;
  pointer-events:none!important;
}
.chinese-hero.chinese-hero>.chinese-hero-wash{display:none!important}
.chinese-hero.chinese-hero>.shell{
  grid-column:1;
  grid-row:1;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:clamp(34px,4vw,54px) 0!important;
  color:#2f231d!important;
}
.chinese-hero.chinese-hero>.shell :is(h1,p,span){color:inherit!important;text-shadow:none!important}
.chinese-hero.chinese-hero>.shell>p{color:#783c2f!important}
.chinese-hero.chinese-hero>.shell>span{display:block;max-width:520px;color:#695c4d!important;line-height:1.72!important}
.animal-portrait{
  background-image:url('/images/chinese-zodiac-atlas.webp')!important;
}

/* Historical, painted and editorial — never a grid of identical square tiles. */
.chinese-cycle{position:relative!important;overflow:hidden;padding-block:clamp(50px,5vw,72px)!important}
.chinese-cycle::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(ellipse at 8% 18%,rgba(139,78,45,.09),transparent 30%),
    radial-gradient(ellipse at 92% 78%,rgba(145,103,47,.09),transparent 34%),
    linear-gradient(180deg,rgba(255,250,239,.22),transparent 38%,rgba(255,250,239,.17));
}
.chinese-cycle>.shell{position:relative;z-index:1;width:min(calc(100% - 64px),1120px)!important;max-width:1120px!important;margin-inline:auto!important}
.animal-knowledge-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:clamp(34px,5vw,64px)!important;
  row-gap:0!important;
  margin-top:clamp(26px,4vw,42px)!important;
}
.animal-knowledge-grid::before{
  content:'';
  display:block;
  grid-column:1/-1;
  min-height:clamp(340px,48vw,590px);
  margin:0 0 clamp(18px,3vw,34px);
  border:1px solid rgba(105,65,32,.24);
  border-radius:50% 50% 30px 30px/34% 34% 22px 22px;
  background:#d8c7a6 url('/images/chinese-zodiac-atlas.webp') center/cover no-repeat;
  box-shadow:0 26px 68px rgba(70,45,25,.15),inset 0 0 0 7px rgba(255,247,229,.2);
}
.chinese-cycle>.shell.has-ah-chinese-atlas .animal-knowledge-grid::before{display:none}
.animal-knowledge-grid>article{
  position:relative;
  display:grid!important;
  grid-template-columns:124px minmax(0,1fr)!important;
  align-items:start!important;
  gap:22px!important;
  min-width:0!important;
  min-height:232px!important;
  padding:28px 0!important;
  border:0!important;
  border-top:1px solid rgba(91,58,31,.18)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.animal-knowledge-grid>article::after{
  content:'十二';
  position:absolute;
  right:0;
  bottom:22px;
  color:rgba(126,66,46,.08);
  font:500 2.8rem/1 Georgia,serif;
  pointer-events:none;
}
.animal-knowledge-grid>article>*{position:relative;z-index:1}
.knowledge-animal-portrait,
.animal-knowledge-grid .animal-portrait{
  width:124px!important;
  height:124px!important;
  margin:0!important;
  border:1px solid rgba(105,65,32,.28)!important;
  border-radius:62px 62px 25px 25px/55px 55px 24px 24px!important;
  box-shadow:0 16px 34px rgba(77,49,25,.13),inset 0 0 0 5px rgba(255,247,229,.34)!important;
  filter:saturate(.88) contrast(1.035)!important;
}
.animal-knowledge-grid h3{margin:.1rem 0 .55rem!important;font-size:clamp(1.35rem,2vw,1.7rem)!important}
.animal-knowledge-grid p{margin:0!important;color:rgba(241,229,205,.72)!important;line-height:1.68!important}

/* Reuse the same painted atlas in softer seals throughout the page. */
.identity-animal-portrait,.forecast-animal-portrait,.compatibility-animal-portrait,
.chinese-identity .animal-portrait,.chinese-forecast .animal-portrait,.chinese-compatibility .animal-portrait{
  overflow:hidden!important;
  border-radius:50% 50% 30% 30%/46% 46% 25% 25%!important;
  border-color:rgba(112,68,34,.25)!important;
  box-shadow:0 18px 42px rgba(75,47,24,.13),inset 0 0 0 5px rgba(255,247,229,.28)!important;
  filter:saturate(.9) contrast(1.025)!important;
}
.chinese-oracle,.chinese-identity,.chinese-forecast,.chinese-compatibility{
  border-radius:34px 10px 34px 10px!important;
}

@media(max-width:820px){
  .chinese-cycle>.shell{width:min(calc(100% - 22px),1120px)!important}
  .animal-knowledge-grid{grid-template-columns:1fr!important}
  .animal-knowledge-grid>article{min-height:0!important}
}

@media(max-width:520px){
  .chinese-hero{background-position:68% center!important}
  .chinese-cycle{padding-block:38px!important}
  .animal-knowledge-grid{margin-top:20px!important}
  .animal-knowledge-grid::before{min-height:300px;border-radius:48% 48% 24px 24px/31% 31% 19px 19px;background-size:cover}
  .animal-knowledge-grid>article{grid-template-columns:88px minmax(0,1fr)!important;gap:15px!important;padding:22px 0!important}
  .knowledge-animal-portrait,.animal-knowledge-grid .animal-portrait{width:88px!important;height:88px!important;border-radius:44px 44px 18px 18px/39px 39px 18px 18px!important}
  .animal-knowledge-grid h3{font-size:1.28rem!important}
  .animal-knowledge-grid p{font-size:.92rem!important;line-height:1.62!important}
  .animal-knowledge-grid>article::after{font-size:2rem;bottom:16px}
}

/* Kunskapssidan visar tydligt vägen till den personliga läsningen utan att blanda in tarot. */
.chinese-hero .chinese-reading-hero-cta{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  margin-top:24px;
  padding:12px 22px;
  border:1px solid rgba(120,60,47,.3);
  border-radius:999px;
  color:#fff4dd!important;
  background:#6b342e;
  box-shadow:0 16px 38px rgba(42,24,17,.2);
  text-decoration:none;
  font-weight:700;
}
.chinese-hero .chinese-reading-hero-cta:hover{transform:translateY(-2px);background:#7a3d34}

@media(max-width:820px){
  .chinese-hero.chinese-hero{
    width:min(calc(100% - 22px),1120px)!important;
    min-height:0!important;
    margin:18px auto 34px!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .chinese-hero.chinese-hero::before{
    grid-column:1;
    grid-row:1;
    min-height:clamp(390px,86vw,560px);
    border-radius:48% 48% 24px 24px/31% 31% 19px 19px;
    background-position:66% center;
  }
  .chinese-hero.chinese-hero>img{
    grid-column:1;
    grid-row:1;
    height:clamp(390px,86vw,560px)!important;
    min-height:clamp(390px,86vw,560px)!important;
    max-height:560px!important;
    object-position:66% center!important;
    border-radius:48% 48% 24px 24px/31% 31% 19px 19px!important;
  }
  .chinese-hero.chinese-hero>.shell{grid-column:1;grid-row:2;padding:0 8px 22px!important}
}

@media(max-width:520px){
  .chinese-hero.chinese-hero::before{min-height:330px}
  .chinese-hero.chinese-hero>img{height:330px!important;min-height:330px!important;max-height:330px!important;border-radius:46% 46% 20px 20px/28% 28% 16px 16px!important}
  .chinese-hero .chinese-reading-hero-cta{width:100%;margin-top:18px}
}


/* Behåll atlasens mjuka valv även när upstream laddar ett senare mobillager. */
@media (max-width: 820px) {
  .ah-chinese-atlas {
    overflow: visible !important;
    border-radius: 0 !important;
  }
  .ah-chinese-atlas img {
    overflow: hidden !important;
    border-radius: 48% 48% 24px 24px / 31% 31% 19px 19px !important;
  }
}
@media (max-width: 520px) {
  .ah-chinese-atlas img {
    border-radius: 46% 46% 20px 20px / 28% 28% 16px 16px !important;
  }
}


/* Every actual animal portrait keeps the same soft, editorial silhouette.
   These three flows previously escaped the atlas treatment and became square. */
.compatibility-animal-box .animal-portrait,
.chinese-reading-heading .reading-animal-portrait,
.animal-selector .animal-portrait {
  overflow:hidden!important;
  border-radius:50% 50% 24% 24% / 45% 45% 22% 22%!important;
  border:1px solid rgba(112,68,34,.24)!important;
  box-shadow:0 12px 28px rgba(75,47,24,.12),inset 0 0 0 4px rgba(255,247,229,.24)!important;
  filter:saturate(.9) contrast(1.025)!important;
}

@media(max-width:520px){
  .compatibility-animal-box .animal-portrait,
  .chinese-reading-heading .reading-animal-portrait,
  .animal-selector .animal-portrait {
    border-radius:48% 48% 18px 18px / 42% 42% 16px 16px!important;
  }
}