*{box-sizing:border-box}
html{background:#15130f;scroll-behavior:smooth}
body{margin:0;background:#15130f;font-family:Georgia,"Times New Roman",serif}

.page-shell{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  background:#eee4d2;
  overflow:hidden
}
.page-image{display:block;width:100%;height:auto}

/* Section anchors matched to the actual 729x1620 artwork */
.section-anchor{
  position:absolute;
  left:0;
  width:1px;
  height:1px;
  pointer-events:none;
  scroll-margin-top:18px
}
.anchor-about{top:25.9%}
.anchor-gallery{top:37.8%}
.anchor-books{top:52.5%}
.anchor-shop{top:66.2%}
.anchor-reviews{top:87.2%}
.anchor-contact{top:95.2%}

/* Click areas matched to the actual navigation text in the JPG */
.nav-hotspot{
  position:absolute;
  z-index:25;
  top:.85%;
  height:1.55%;
  display:block;
  cursor:pointer;
  background:transparent;
  border-radius:4px
}
.nav-home{left:45.5%;width:5.0%}
.nav-books{left:51.4%;width:8.2%}
.nav-about{left:60.2%;width:5.6%}
.nav-gallery{left:66.7%;width:6.0%}
.nav-reviews{left:73.1%;width:6.8%}
.nav-contact{left:80.4%;width:6.6%}
.nav-cart{left:92.4%;width:3.9%}
.nav-hotspot:focus-visible{outline:3px solid #d9b765;outline-offset:1px}

/* Existing BUY click areas */
.buy-hotspot{
  position:absolute;
  z-index:20;
  top:85.5%;
  height:2.7%;
  display:block;
  border-radius:999px;
  cursor:pointer;
  background:transparent
}
.buy-digital{left:8.5%;width:21.5%}
.buy-print{left:42.5%;width:18.5%}
.buy-bundle{left:71.0%;width:20.0%}
.buy-hotspot:focus-visible{outline:3px solid #d9b765;outline-offset:2px}

.language-switch{
  position:fixed;
  z-index:100;
  top:18px;
  right:18px;
  display:flex;
  gap:5px;
  padding:6px;
  border:1px solid rgba(210,171,92,.85);
  border-radius:7px;
  background:rgba(13,16,14,.86);
  backdrop-filter:blur(5px)
}
.language-switch a{
  display:block;
  padding:7px 10px;
  border-radius:4px;
  color:#e0c98f;
  text-decoration:none;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1
}
.language-switch a.active{color:#17130e;background:#d9b765}

@media(prefers-reduced-motion:no-preference){
  .js .page-shell{
    opacity:0;
    transform:translateY(12px);
    transition:opacity 1.15s ease,transform 1.35s cubic-bezier(.22,.61,.36,1)
  }
  .js .page-shell.is-visible{opacity:1;transform:translateY(0)}
  .js .language-switch{
    opacity:0;
    transform:translateY(-7px);
    transition:opacity .75s ease .35s,transform .75s ease .35s
  }
  .js .language-switch.is-visible{opacity:1;transform:translateY(0)}
}
@media(max-width:700px){
  .language-switch{top:9px;right:9px;padding:5px}
  .language-switch a{padding:6px 8px;font-size:12px}
}


/* Real navigation overlay: same dark-blue bar on EN and KZ. */
.real-nav{
  position:absolute;
  z-index:40;
  top:.45%;
  left:43.8%;
  width:45.8%;
  height:2.1%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(5px,1.15vw,14px);
  padding:0 1.0%;
  background:#0b2239;
  font-family:Arial,"Segoe UI",sans-serif;
  font-size:clamp(8px,1.05vw,14px);
  white-space:nowrap
}
.real-nav a{
  color:#fff;
  text-decoration:none;
  line-height:1;
  padding:.45em .18em;
  text-shadow:0 1px 2px rgba(0,0,0,.3)
}
.real-nav a:hover,
.real-nav a:focus-visible{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px
}
/* Contact no longer drifts away from the preceding item. */
.real-nav a:last-child{margin-left:0}

/* The visible real navigation receives the clicks on both language pages. */
.real-nav ~ .nav-home,
.real-nav ~ .nav-books,
.real-nav ~ .nav-about,
.real-nav ~ .nav-gallery,
.real-nav ~ .nav-reviews,
.real-nav ~ .nav-contact{pointer-events:none}

@media(max-width:700px){
  .real-nav{
    left:43.5%;
    width:46.2%;
    gap:clamp(2px,.85vw,7px);
    font-size:clamp(6px,1.28vw,10px);
    padding:0 .45%
  }
  .real-nav a{padding:.35em .08em}
}

.real-nav{
  background:#071d33 !important;
  color:#fff !important;
}
.real-nav a{
  color:#fff !important;
  font-family:Arial,"Segoe UI",sans-serif !important;
  font-weight:600;
}