:root{
  --bg:#03070b;
  --panel:#071016;
  --panel-2:#0b151c;
  --text:#eef2f5;
  --muted:#818891;
  --soft:#adb3bb;
  --gold:#b7982f;
  --gold-soft:#e0c45a;
  --blue:#1e8ed8;
  --line:rgba(255,255,255,.1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
}

body.sheet-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit}
a{color:inherit}
[hidden]{display:none!important}

.skip-link{position:fixed;top:-5rem;left:1rem;z-index:1000;padding:.75rem 1rem;background:#fff;color:#000;border-radius:6px}
.skip-link:focus{top:1rem}

.page-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(3,7,11,.16),rgba(3,7,11,.88)),
    radial-gradient(ellipse at 50% 12%,rgba(183,152,47,.1),transparent 25rem),
    radial-gradient(ellipse at 78% 60%,rgba(30,142,216,.13),transparent 28rem),
    url("assets/london-city-background-v51.png") center/cover no-repeat,
    #03070b;
  filter:saturate(.92) brightness(.56);
}

.page-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,7,11,.76),transparent 30%,transparent 70%,rgba(3,7,11,.76)),
    linear-gradient(180deg,rgba(3,7,11,.08),rgba(3,7,11,.72));
}

.top-mark{
  position:fixed;
  left:0;
  right:0;
  top:14px;
  z-index:30;
  display:grid;
  place-items:center;
  pointer-events:none;
}

.mark-link{
  pointer-events:auto;
  display:grid;
  gap:.12rem;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.42em;
  font-weight:900;
  font-size:.76rem;
  color:var(--gold);
}

.mark-link small{color:#4d535b;letter-spacing:.72em;font-size:.58rem}

.home-hero{
  min-height:100svh;
  width:min(1320px,calc(100% - 2rem));
  margin:0 auto;
  padding:92px 0 118px;
  display:grid;
  align-items:center;
}

.page-main{
  width:min(1180px,calc(100% - 2rem));
  margin:0 auto;
  padding:82px 0 120px;
}

.page-hero{
  min-height:72svh;
  display:grid;
  align-items:center;
  padding:48px 0 70px;
}

.content-section{
  padding:80px 0;
}

.hero-card,.split-section{
  display:grid;
  grid-template-columns:minmax(280px,430px) minmax(0,1fr);
  gap:5rem;
  align-items:center;
  max-width:1040px;
  margin:0 auto;
}

.hero-card-large{
  grid-template-columns:minmax(320px,500px) minmax(0,1fr);
  max-width:1120px;
}

.hero-book,.split-image{
  position:relative;
  border:1px solid rgba(183,152,47,.55);
  border-radius:4px;
  background:#15100a;
  box-shadow:0 26px 70px rgba(0,0,0,.56),0 0 36px rgba(183,152,47,.08);
  overflow:hidden;
}

.hero-book img,.split-image img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}

.tag{
  position:absolute;
  top:-1px;
  right:-1px;
  min-width:136px;
  padding:.52rem .72rem;
  border:1px solid rgba(183,152,47,.62);
  background:rgba(8,10,11,.72);
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.62rem;
  font-weight:900;
  text-align:center;
}

.eyebrow{
  margin:0 0 1rem;
  color:var(--gold);
  font-weight:900;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.54em;
}

h1,h2,h3{margin:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;line-height:1.05}
h1{font-size:clamp(4.2rem,7.6vw,6.7rem)}
h2{font-size:clamp(2.6rem,5vw,4.2rem)}
h3{font-size:1.55rem}

.rule{display:block;width:52px;height:1px;margin:1.65rem 0;background:linear-gradient(90deg,var(--gold),transparent)}
.lead{margin:0 0 1.2rem;color:#d3d8de;font-size:1.14rem;line-height:1.7}
.support,.split-copy p,.section-heading p:not(.eyebrow){color:#929aa3;line-height:1.78}

.hero-actions,.sheet-actions,.contact-links{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

.gold-button,.ghost-button{
  min-height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85rem 1.3rem;
  border-radius:4px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.74rem;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
}

.gold-button{border:1px solid rgba(183,152,47,.76);background:rgba(183,152,47,.12);color:var(--gold-soft)}
.ghost-button{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);color:#dce2e8}
.gold-button:hover,.ghost-button:hover,.book-card:hover,.news-card:hover,.price-card:hover{transform:translateY(-2px);border-color:rgba(223,195,88,.82)}

.section-heading{text-align:center;margin:0 auto 4rem;max-width:760px}
.section-heading .rule{margin-left:auto;margin-right:auto}

.price-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.price-card{
  min-height:340px;
  display:flex;
  flex-direction:column;
  padding:1.35rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(8,16,22,.88),rgba(4,8,11,.88));
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}

.price-card.live{border-color:rgba(183,152,47,.7);background:linear-gradient(180deg,rgba(53,44,15,.34),rgba(4,8,11,.92))}
.price-card span,.detail-card span{color:var(--gold);text-transform:uppercase;letter-spacing:.24em;font-size:.68rem;font-weight:900}
.price-card h3{margin:1.2rem 0 .8rem}
.price-card strong{font-family:Georgia,serif;font-size:2.9rem;color:#fff}
.price-card p{color:#9ea6ae;line-height:1.7;margin:1rem 0 1.3rem}
.price-card .gold-button,.price-card .ghost-button{margin-top:auto}

.book-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem}
.book-card{appearance:none;display:grid;justify-items:center;gap:.68rem;padding:0;border:0;background:transparent;color:var(--text);cursor:pointer;text-align:center}
.book-art{width:100%;min-height:274px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:linear-gradient(180deg,transparent 0 58%,rgba(13,43,59,.42) 100%),rgba(0,0,0,.28)}
.book-card.active .book-art{border-color:rgba(183,152,47,.6)}
.book-art img{width:100%;height:100%;min-height:274px;object-fit:cover}
.book-art i{display:block;width:34px;height:150px;border-radius:18px 4px 4px 18px;background:linear-gradient(90deg,rgba(255,255,255,.04),transparent 22%,rgba(183,152,47,.28) 50%,transparent 78%,rgba(255,255,255,.06)),#06080a;box-shadow:0 0 24px rgba(24,82,108,.35),0 18px 38px rgba(0,0,0,.62)}
.book-card em{color:rgba(183,152,47,.7);font-family:Georgia,serif;font-size:.84rem}
.book-card small{color:#565c64;text-transform:uppercase;letter-spacing:.42em;font-size:.68rem;font-weight:900;margin-top:.5rem}
.book-card strong{color:#c8cdd3;font-family:Georgia,serif;font-style:italic;font-size:.95rem}
.book-card b{min-width:108px;padding:.44rem .7rem;border:1px solid rgba(183,152,47,.65);border-radius:4px;color:#d7bc4c;text-transform:uppercase;letter-spacing:.24em;font-size:.56rem}

.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.detail-card{padding:1.25rem;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:rgba(4,8,11,.58)}
.detail-card strong{display:block;margin-top:1rem;font-family:Georgia,serif;font-size:1.25rem}
.detail-card p{color:#929aa3;line-height:1.7;margin:1rem 0 0}

.author-story{padding-top:38px}
.story-columns{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3rem;
}
.story-columns p{color:#a6aeb7;line-height:1.82;margin:0 0 1.15rem}
.story-columns .lead-line{
  color:#e5e9ee;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:1.45rem;
  line-height:1.45;
}
.about-grid .detail-card{min-height:236px}

.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.news-grid-wide{grid-template-columns:repeat(4,minmax(0,1fr))}
.news-card{min-height:220px;padding:1.35rem;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:rgba(4,8,11,.58);color:var(--text);text-align:left;cursor:pointer;text-decoration:none}
.news-card time{color:var(--gold);text-transform:uppercase;letter-spacing:.24em;font-size:.68rem;font-weight:900}
.news-card strong{display:block;margin:2.5rem 0 .85rem;font-family:Georgia,serif;font-style:italic;font-size:1.45rem}
.news-card span{color:#848b93}

.notify-panel{max-width:700px;margin:0 auto;text-align:center;padding:1rem}
.notify-panel .rule{margin-left:auto;margin-right:auto}
.notify-panel p{color:#aab1b8;line-height:1.7}
.notify-form{display:grid;grid-template-columns:1fr 176px;gap:.75rem;margin:2.3rem 0 .85rem}
.notify-form input{min-height:50px;padding:0 1rem;border:1px solid rgba(255,255,255,.14);border-radius:4px;background:rgba(0,0,0,.24);color:var(--text);outline:none}
.notify-form input:focus{border-color:rgba(183,152,47,.7);box-shadow:0 0 0 3px rgba(183,152,47,.08)}
.notify-panel small{color:#707781;font-family:ui-monospace,Consolas,monospace}
.contact-links{justify-content:center}
.contact-links a{color:var(--gold-soft);font-weight:900}

.bottom-nav{
  position:fixed;
  left:50%;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:35;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:.32rem;
  padding:.45rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(5,8,10,.84);
  box-shadow:0 18px 48px rgba(0,0,0,.52);
}

.bottom-nav a{min-height:44px;display:inline-flex;align-items:center;gap:.48rem;padding:0 .95rem;border-radius:999px;color:#8b929a;text-decoration:none;font-weight:800;white-space:nowrap}
.bottom-nav a.active{color:#e6c85a;background:rgba(183,152,47,.18);box-shadow:inset 0 0 0 1px rgba(183,152,47,.45)}
.bottom-nav span{width:8px;height:8px;border:1px solid currentColor;border-radius:50%}

.sheet-backdrop{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.58);opacity:0;transition:opacity .28s ease}
.sheet-backdrop.is-open{opacity:1}
.slide-sheet{position:fixed;left:50%;bottom:0;z-index:80;width:min(800px,calc(100% - 1rem));max-height:min(78vh,760px);overflow:auto;transform:translate(-50%,110%);transition:transform .42s cubic-bezier(.22,.84,.32,1);padding:2rem;border:1px solid rgba(183,152,47,.24);border-bottom:0;border-radius:14px 14px 0 0;background:linear-gradient(180deg,rgba(9,17,23,.97),rgba(3,7,11,.99)),#05090d;box-shadow:0 -28px 90px rgba(0,0,0,.68)}
.slide-sheet.is-open{transform:translate(-50%,0)}
.sheet-close{position:absolute;right:1rem;top:1rem;width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:rgba(255,255,255,.04);color:#fff;cursor:pointer}
.slide-sheet h2{padding-right:3rem;margin-bottom:1rem}
.sheet-body{color:#aab1b8;line-height:1.78}
.sheet-body p{margin-top:0}
.sheet-list{display:grid;gap:.55rem;margin:1rem 0;padding:0;list-style:none}
.sheet-list li{padding:.7rem .8rem;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:rgba(255,255,255,.025)}
.sheet-price{font-family:Georgia,serif;font-size:2.3rem;color:#fff}

.tiny-footer{position:fixed;left:0;right:0;bottom:.15rem;z-index:1;text-align:center;color:#2f343a;text-transform:uppercase;letter-spacing:.44em;font-size:.65rem}

.js .reveal{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.78,.2,1)}
.js .reveal-left{transform:translate3d(-42px,0,0)}
.js .reveal-right{transform:translate3d(42px,0,0)}
.js .reveal-up{transform:translate3d(0,44px,0)}
.js .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
}

@media (max-width:1120px){
  .book-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .news-grid-wide{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:860px){
  .home-hero,.page-main{width:min(100% - 1rem,1180px)}
  .hero-card,.hero-card-large,.split-section{grid-template-columns:1fr;gap:2rem}
  .hero-book,.split-image{width:min(390px,88vw);margin:0 auto}
  .hero-copy,.split-copy{text-align:center}
  .rule{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .price-grid,.detail-grid,.news-grid,.news-grid-wide{grid-template-columns:1fr}
  .story-columns{grid-template-columns:1fr;gap:1.25rem;max-width:720px}
  .notify-form{grid-template-columns:1fr}
  .bottom-nav{width:calc(100% - .5rem);overflow-x:auto;justify-content:flex-start;border-radius:18px}
  .bottom-nav a{padding:0 .75rem}
}

@media (max-width:540px){
  .top-mark{top:12px}
  .mark-link{font-size:.64rem}
  .home-hero{padding-top:82px;min-height:auto}
  .page-main{padding-top:82px}
  .page-hero{min-height:auto;padding:42px 0 54px}
  .content-section{padding:56px 0}
  h1{font-size:3.25rem}
  h2{font-size:2.35rem}
  .lead{font-size:.98rem;line-height:1.58}
  .support{display:none}
  .hero-book,.split-image{width:min(300px,88vw)}
  .eyebrow{font-size:.62rem;letter-spacing:.42em}
  .gold-button,.ghost-button{min-height:48px;padding:.78rem 1rem;letter-spacing:.2em}
  .price-card{min-height:auto}
  .book-row{grid-template-columns:1fr}
  .book-art{min-height:230px}
  .book-art img{min-height:230px}
  .bottom-nav{gap:0;padding:.32rem;justify-content:space-between}
  .bottom-nav a{min-height:40px;padding:0 .38rem;gap:.22rem;font-size:.72rem}
  .bottom-nav span{width:6px;height:6px}
  .slide-sheet{padding:1.45rem 1rem 1.25rem}
  .js .reveal-left,
  .js .reveal-right{
    transform:translate3d(0,34px,0);
  }
}
