
:root{
  --ink:#020915;
  --navy:#06182a;
  --navy-2:#0a223d;
  --sapphire:#2f74d0;
  --ice:#d7efff;
  --silver:#c8d4df;
  --pearl:#f7f8fb;
  --muted:#9fb4c8;
  --line:rgba(207,232,255,.16);
  --glow:0 0 28px rgba(80,166,255,.32);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 5%, rgba(40,103,170,.20), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(18,62,108,.25), transparent 30%),
    linear-gradient(180deg,#020813 0%,#061321 48%,#020a12 100%);
  color:var(--pearl);
  font-family:"Libre Baskerville",serif;
  line-height:1.7;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.8) .6px,transparent .6px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(20px,5vw,72px);
  background:rgba(2,9,21,.78);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(207,232,255,.10);
}
.brand{font-family:Cinzel,serif;letter-spacing:.08em;font-weight:700}
.brand span{font-size:.62em;color:var(--ice);display:block;letter-spacing:.34em}
.nav{display:flex;gap:28px;font-family:Cinzel,serif;font-size:.78rem;letter-spacing:.08em}
.nav a{color:var(--silver)}
.nav a:hover{color:white;text-shadow:0 0 12px #7fc4ff}
.nav-toggle{display:none;background:none;border:0;color:white;font-size:1.5rem}
.hero{
  min-height:88vh;
  display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  gap:clamp(28px,5vw,70px);
  padding:clamp(56px,7vw,110px) clamp(22px,7vw,110px);
  position:relative;
}
.hero:after{
  content:"";position:absolute;left:6%;right:6%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)
}
.eyebrow,.section-kicker{
  font-family:Cinzel,serif;letter-spacing:.22em;color:#a8c9e8;font-size:.74rem
}
h1,h2,h3{font-family:"Cormorant Garamond",serif;margin:.1em 0 .4em}
h1{font-size:clamp(3.3rem,7vw,7rem);line-height:.88;font-weight:500}
h1 span{
  display:block;color:var(--ice);font-family:"Great Vibes",cursive;font-weight:400;
  text-shadow:0 0 18px rgba(115,196,255,.35);font-size:1.04em;margin-top:.12em
}
.lead{max-width:680px;color:#c3d2df;font-size:clamp(1rem,1.55vw,1.2rem)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border-radius:999px;
  font-family:Cinzel,serif;font-size:.77rem;letter-spacing:.12em;border:1px solid transparent;cursor:pointer
}
.btn-primary{
  background:linear-gradient(135deg,#9dd8ff,#3c83df 55%,#174b98);
  color:#020914;box-shadow:0 0 26px rgba(76,151,235,.35);font-weight:700
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(117,197,255,.55)}
.btn-ghost{border-color:rgba(207,232,255,.28);color:#e7f4ff;background:rgba(255,255,255,.03)}
.script-line,.script-large{font-family:"Great Vibes",cursive;color:#cfe8ff}
.script-line{font-size:2rem;margin:8px 0 0}
.hero-art{position:relative}
.hero-art img{
  width:min(720px,100%);margin:auto;
  border-radius:6px;box-shadow:0 36px 90px rgba(0,0,0,.5);
  position:relative;z-index:2
}
.book-glow{
  position:absolute;inset:15% 12%;background:#2477c8;filter:blur(90px);opacity:.28;z-index:0
}
.quote-band{
  text-align:center;padding:36px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,transparent,rgba(17,58,95,.35),transparent)
}
.quote-band blockquote{font-family:"Cormorant Garamond",serif;font-size:clamp(1.4rem,3vw,2.4rem);font-style:italic;margin:10px}
.quote-band cite{font-family:Cinzel,serif;font-style:normal;color:#a9bed2;font-size:.8rem;letter-spacing:.18em}
.diamond{color:#8bd1ff;text-shadow:0 0 16px #47a7ef}
.section{padding:clamp(72px,9vw,128px) clamp(22px,7vw,110px)}
.section>h2,.about>h2,.features>h2,.authors>h2,.preview>h2{
  font-size:clamp(2.5rem,5vw,4.8rem);font-weight:500
}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,6vw,90px);align-items:center}
.about-image img{border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.about-copy{font-size:1.04rem;color:#c6d4df}
.dropcap:first-letter{font-family:"Cormorant Garamond",serif;font-size:5rem;float:left;line-height:.72;padding:10px 8px 0 0;color:#a9ddff}
.text-link{color:#b9e2ff;font-family:Cinzel,serif;font-size:.78rem;letter-spacing:.1em}
.features{background:rgba(255,255,255,.018)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.gem-card{
  padding:30px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(21,59,94,.38),rgba(3,15,28,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)
}
.gem-card h3{font-size:2rem;color:#e7f4ff}
.gem-card p{color:#9fb4c8;font-size:.92rem}
.gem-icon{font-size:1.7rem;filter:drop-shadow(0 0 10px #4ca9ef)}
.authors-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}
.author-card{
  padding:42px;border:1px solid var(--line);border-radius:22px;
  background:radial-gradient(circle at top right,rgba(65,138,205,.16),transparent 35%),rgba(255,255,255,.018)
}
.initials{
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #70bdf5;color:#d6eeff;font-family:Cinzel,serif;font-size:1.35rem;
  box-shadow:0 0 24px rgba(82,165,230,.22)
}
.author-card h3{font-size:2.5rem}
.author-card p{color:#aebfce}
.preview{background:linear-gradient(180deg,rgba(1,7,13,.2),rgba(5,22,38,.55))}
.poem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.poem-card{
  min-height:300px;padding:34px;border:1px solid rgba(207,232,255,.14);border-radius:20px;
  background:linear-gradient(145deg,rgba(19,57,89,.4),rgba(2,10,18,.75))
}
.poem-card span{font-family:Cinzel,serif;color:#7fc8f7;font-size:.75rem;letter-spacing:.12em}
.poem-card h3{font-size:2.4rem}
.poem-card p{font-family:"Cormorant Garamond",serif;font-size:1.25rem;color:#d1dbe3}
.launch{display:grid;place-items:center}
.launch-panel{
  width:min(920px,100%);text-align:center;padding:clamp(42px,7vw,80px);
  border:1px solid rgba(191,228,255,.22);border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%,rgba(69,148,214,.22),transparent 36%),
    linear-gradient(180deg,rgba(16,53,84,.35),rgba(3,12,22,.88));
  box-shadow:0 30px 100px rgba(0,0,0,.34)
}
.launch-panel h2{font-size:clamp(2.6rem,5vw,4.8rem)}
.launch-copy{max-width:690px;margin:0 auto 26px;color:#b5c6d4}
.signup{display:flex;gap:10px;max-width:650px;margin:auto}
.signup input{
  flex:1;min-height:52px;border-radius:999px;border:1px solid rgba(207,232,255,.22);
  background:rgba(2,12,23,.75);padding:0 22px;color:white;outline:none
}
.signup input:focus{border-color:#78c7ff;box-shadow:0 0 0 3px rgba(76,169,239,.12)}
.form-note{font-size:.8rem;color:#829bb1}
.final-cta{text-align:center;padding-top:40px}
.script-large{font-size:clamp(2.8rem,6vw,5.7rem);margin:0}
.final-cta h2{font-family:Cinzel,serif;font-size:clamp(1.7rem,3vw,2.8rem);letter-spacing:.08em}
footer{
  text-align:center;padding:46px 20px 60px;border-top:1px solid var(--line);color:#9fb3c4
}
.footer-brand{font-family:Cinzel,serif;color:white;font-size:1.15rem;letter-spacing:.1em}
.footer-brand span{display:block;font-size:.6em;letter-spacing:.35em;color:#aac8e0}
.small{font-size:.75rem}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:980px){
  .hero,.about-grid{grid-template-columns:1fr}
  .hero-art{order:-1}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .poem-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;padding:20px;
    background:#04101d;flex-direction:column;border-bottom:1px solid var(--line)
  }
  .nav.open{display:flex}
  .authors-grid,.feature-grid{grid-template-columns:1fr}
  .signup{flex-direction:column}
  .signup .btn{width:100%}
}
