@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,500;1,700&family=Inter:wght@400;500;700&display=swap');
:root{--panel:rgba(9,17,25,.88);--gold:#d99b41;--gold2:#ffd892;--cream:#f7e7c0;--muted:#caa66d;--line:rgba(217,155,65,.42)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 20% 0%,#35190e,#06111a 45%,#000);color:var(--cream);font-family:Inter,system-ui,sans-serif}.topbar{position:fixed;top:0;left:0;right:0;height:74px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,5vw,70px);background:linear-gradient(to bottom,rgba(0,0,0,.94),rgba(0,0,0,.5));border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.brand,nav a{color:var(--gold2);text-decoration:none;text-transform:uppercase;font-family:Cinzel,serif;letter-spacing:.1em;font-size:13px}.brand{font-size:19px;font-weight:800}nav{display:flex;gap:20px}.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--gold2);font-size:23px;border-radius:8px}.hero{min-height:100vh;display:grid;grid-template-columns:minmax(280px,500px) 1fr;gap:clamp(22px,5vw,75px);align-items:center;padding:112px clamp(20px,6vw,90px) 60px}.section{padding:clamp(62px,8vw,110px) clamp(20px,6vw,90px)}.page-hero{padding-top:120px;text-align:center}.hero-poster,.character-image,.book-card img,.book-page-cover,.mini-book img{width:100%;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.7)}.kicker{color:var(--gold2);text-transform:uppercase;letter-spacing:.28em;font:700 13px Cinzel,serif}.center{text-align:center}h1,h2,h3,h4{font-family:Cinzel,serif;color:var(--gold2);margin:0 0 18px}h1{font-size:clamp(50px,7vw,100px);line-height:.9;letter-spacing:.05em}h1 span{font-size:.54em}h2{font-size:clamp(32px,5vw,54px);line-height:1.06}h3{font-size:24px}h4{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;color:#fff0cc}p{line-height:1.75;color:#ead9b7}.hero-line{font:italic clamp(28px,4vw,44px) 'Cormorant Garamond',serif;color:#fff4dc;line-height:1.15}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-block;border-radius:999px;padding:13px 22px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;font-size:12px;text-decoration:none;border:1px solid var(--gold);cursor:pointer;margin:4px}.text-btn{border:0;color:var(--gold2);padding-left:0}.primary{background:linear-gradient(135deg,#9a6314,#f5d77d,#8c570d);color:#130804}.secondary{background:rgba(0,0,0,.35);color:var(--gold2)}.split,.book-page{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}.quote-card,.card,.book-card,.mini-book,.buy-box,details,.map-wrapper,.globe-panel,.globe-info,.city-info-card,.dva-feature-banner{background:var(--panel);border:1px solid var(--line);box-shadow:0 20px 70px rgba(0,0,0,.35);border-radius:18px}.quote-card{padding:42px;text-align:center}.quote-card p{font:italic 38px 'Cormorant Garamond',serif;color:var(--gold2);line-height:1.2}.mini-grid,.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}.book-card,.mini-book{overflow:hidden}.mini-book div,.book-copy{padding:22px}.book-card img,.mini-book img{display:block;box-shadow:none;border:0;border-bottom:1px solid var(--line);aspect-ratio:2/3;object-fit:cover}.book-page-cover{max-width:430px}.buy-box{padding:24px;margin-top:24px}select,input{width:100%;padding:14px 16px;border-radius:999px;border:1px solid var(--line);background:#090605;color:var(--cream);margin:10px 0 16px}.free-read details{padding:24px;max-width:1100px;margin:auto}.chapter{max-height:760px;overflow:auto;padding-right:12px}.character-image{max-width:1100px;display:block;margin:30px auto;border-radius:14px}.cards{display:grid;gap:22px;margin-top:30px}.two{grid-template-columns:repeat(2,1fr)}.three{grid-template-columns:repeat(3,1fr)}.card{padding:28px}.featured{background:linear-gradient(180deg,rgba(109,61,16,.88),rgba(10,17,24,.88))}.price{font:700 36px 'Cormorant Garamond',serif;color:var(--gold2)}ul,ol{padding-left:20px;line-height:1.9;color:#ead9b7}.coming-soon{position:relative}.coming-soon:before{content:"COMING SOON";position:absolute;top:14px;right:14px;background:linear-gradient(135deg,#9a6314,#f5d77d,#8c570d);color:#130804;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.12em;z-index:2}.stats-strip{padding-top:40px;padding-bottom:40px}.stat-card h2{font-size:48px}.ukraine-availability,.ukraine-shipping-note{max-width:980px;margin:18px auto;color:#ffd892;background:rgba(217,155,65,.10);border:1px solid var(--line);border-radius:14px;padding:14px 18px}.ukraine-shipping-note{font-size:14px}.dva-feature-banner{max-width:1320px;margin:0 auto;padding:18px}.dva-feature-banner img{width:100%;display:block;border-radius:16px;border:1px solid var(--line)}.image-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:28px}.image-grid figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.35)}.image-grid img{width:100%;display:block}.image-grid figcaption{padding:18px;color:var(--muted);font-style:italic}.globe-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}.globe-panel{padding:18px}#storyGlobe{width:100%;height:auto;display:block;border-radius:16px;background:#02070b;cursor:grab;touch-action:none}#storyGlobe:active{cursor:grabbing}.globe-controls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:14px}.globe-info{padding:32px}.city-info-card{padding:22px;margin-top:22px}.city-cards{margin-top:34px}footer{text-align:center;padding:30px;border-top:1px solid var(--line);color:var(--muted)}
@media(max-width:1100px){.mini-grid,.book-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.hero,.split,.book-page,.two,.three,.mini-grid,.book-grid,.image-grid,.globe-layout{grid-template-columns:1fr}.hero{text-align:center}.actions{justify-content:center}.menu-btn{display:block}nav{display:none;position:absolute;right:18px;top:74px;flex-direction:column;background:#050607;border:1px solid var(--line);padding:18px}nav.open{display:flex}}

.city-hero{
min-height:80vh;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
}
.city-overlay{
background:rgba(0,0,0,.65);
backdrop-filter:blur(4px);
padding:40px;
border:1px solid rgba(217,155,65,.4);
border-radius:18px;
max-width:1100px;
margin:120px 20px 40px;
}

.city-hero{
  min-height:86vh;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.city-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.72));
}
.city-overlay{
  position:relative;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(5px);
  padding:46px;
  border:1px solid rgba(217,155,65,.45);
  border-radius:22px;
  max-width:1000px;
  margin:120px 20px 40px;
  text-align:center;
  box-shadow:0 24px 90px rgba(0,0,0,.55);
}
.character-pills{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.character-pill{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(217,155,65,.12);
  border:1px solid var(--line);
  color:var(--gold2);
  font-weight:700;
}
.timeline-box{
  max-width:900px;
  margin:0 auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px 34px;
  box-shadow:0 20px 70px rgba(0,0,0,.35);
}
.timeline-box li{
  margin-bottom:14px;
  font-size:18px;
}
.city-hero, .card, .quote-card, .timeline-box{
  animation:fadeRise .8s ease both;
}
@keyframes fadeRise{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

/* Final city mockup backgrounds */
.city-hero-mockup{
  min-height:92vh;
  background-size:cover;
  background-position:center top;
}
.city-hero-mockup .city-overlay{
  max-width:820px;
  margin-left:clamp(20px,4vw,80px);
  margin-right:auto;
  background:rgba(0,0,0,.50);
}
@media(max-width:900px){
  .city-hero-mockup{
    background-position:center top;
    min-height:78vh;
  }
  .city-hero-mockup .city-overlay{
    margin-left:20px;
    margin-right:20px;
  }
}

/* Bottom city image gallery */
.city-gallery-section{
  padding-top:50px;
}
.city-gallery-card{
  max-width:950px;
  margin:32px auto 0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  box-shadow:0 20px 70px rgba(0,0,0,.35);
  text-align:center;
}
.city-gallery-card img{
  width:100%;
  max-height:420px;
  object-fit:contain;
  background:#040608;
  border-radius:16px;
  border:2px solid rgba(217,155,65,.75);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  transition:transform .3s ease, box-shadow .3s ease;
}
.city-gallery-card img:hover{
  transform:scale(1.018);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.city-quote{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(24px,3vw,34px);
  color:var(--gold2);
  text-align:center;
  margin:28px auto 16px;
  line-height:1.25;
}
.city-gallery-card p:not(.city-quote){
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:900px){
  .city-gallery-card{
    padding:14px;
  }
  .city-gallery-card img{
    max-height:360px;
  }
}
