*{box-sizing:border-box}
:root{
  --bg:#0b1a26;
  --bg-2:#0e2130;
  --ink:#e6dcc7;
  --muted:#b9ab8a;
  --accent:#d9c39c;
  --card:#0f2332;
  --ring:#f0e6d2;
}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(60% 120% at 50% 0%, #0e2537 0%, var(--bg) 35%, #07131c 100%);
  color:var(--ink);
  font:16px/1.6 'Georgia', 'Garamond', 'Times New Roman', serif;
  letter-spacing:.2px;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem clamp(1rem, 4vw, 2rem);
  position:sticky;top:0;background:rgba(11,26,38,.7);backdrop-filter:blur(8px);
  z-index:10;border-bottom:1px solid rgba(217,195,156,.12)
}
nav a{margin-left:1rem}
.logotype{margin:0;font-size:clamp(1.4rem, 4vw, 2rem);letter-spacing:.08em}
.tagline{margin:.2rem 0 0;color:var(--muted);font-size:.95rem}
.hero{
  position:relative;
  padding:clamp(4rem, 9vw, 8rem) 1rem;
  background:
    radial-gradient(1200px 500px at 50% -200px, rgba(217,195,156,.2), transparent 70%),
    url('assets/website-header.jpg') center/cover no-repeat fixed;
  border-bottom:1px solid rgba(217,195,156,.12)
}
.hero::after{
  content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,26,38,.2), rgba(11,26,38,.9))
}
.hero-inner{position:relative;max-width:1000px;margin:0 auto;text-align:center;z-index:1}
.series{font-size:clamp(2.2rem, 8vw, 5rem);margin:0 0 .5rem 0;letter-spacing:.16em;text-transform:uppercase;font-weight:500;}
.series-sub{margin:0 0 1rem 0;color:var(--muted);font-size:clamp(1rem,2.5vw,1.25rem)}
.cta{display:inline-block;margin-top:.5rem;padding:.75rem 1.25rem;border:1px solid var(--accent);border-radius:4px}
.content{max-width:1100px;margin:auto;padding:2rem 1rem}
.books h2,.about h2,.newsletter h2{font-size:1.6rem;margin:0 0 .75rem}
.grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem
}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(217,195,156,.15);border-radius:8px;overflow:hidden}
.card-inner{display:block;background:none;border:none;color:inherit;text-align:left;padding:0;cursor:pointer;width:100%}
.card img{display:block;width:100%;height:490px;object-fit:cover;filter:saturate(.95);transition:transform .35s ease}
.card h3{margin:.75rem 1rem 1rem;font-size:1.1rem}
.card-inner:hover img{transform:scale(1.02)}
.card-subtitle{display:block;margin:-0.5rem 1rem 1rem;color:var(--muted);font-size:.9rem}
.about{margin-top:2rem}
.newsletter{margin-top:2rem}
.signup{display:grid;grid-template-columns:1fr auto;gap:.75rem;max-width:480px}
.signup label{grid-column:1/-1;color:var(--muted)}
.signup input{padding:.6rem .75rem;border-radius:4px;border:1px solid rgba(217,195,156,.25);background:var(--bg-2);color:var(--ink)}
.signup button{padding:.6rem 1rem;border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:4px;cursor:pointer}
.disclaimer{grid-column:1/-1;margin:0;color:var(--muted);font-size:.9rem}
.site-footer{padding:2rem 1rem;border-top:1px solid rgba(217,195,156,.12);text-align:center;color:var(--muted)}
dialog{border:none;border-radius:10px;max-width:min(900px, 92vw);padding:0;background:var(--bg);color:var(--ink);box-shadow:0 10px 40px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(0,0,0,.6)}
#modal-body{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem}
#modal-body img{width:100%;height:auto;border-radius:8px}
.modal-copy{padding:1rem}
.modal-copy h3{margin-top:0}
.close{position:absolute;right:.5rem;top:.3rem;background:transparent;border:none;color:var(--ink);font-size:2rem;cursor:pointer}
@media (max-width:720px){
  #modal-body{grid-template-columns:1fr}
  .card img{height:360px}
}