:root { --navy:#112037; --gold:#f5c518; --ink:#1b1b1b; --muted:#5b6473; --line:#e6e8ec; --bg:#ffffff; --soft:#f6f7f9; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
a { color:var(--navy); }
img { max-width:100%; height:auto; }
.announce { background:var(--gold); color:var(--navy); text-align:center; font-weight:600; padding:.5rem 1rem; }
header.top { display:flex; align-items:center; justify-content:space-between; padding:1rem 5vw; border-bottom:1px solid var(--line); }
header.top nav a { margin-left:1.5rem; text-decoration:none; font-weight:600; color:var(--navy); }
main { max-width:1120px; margin:0 auto; padding:0 5vw 3rem; }
.hero { padding:3.5rem 0 2.5rem; border-bottom:1px solid var(--line); }
.hero h1 { font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.15; margin:0 0 1rem; color:var(--navy); max-width:22ch; }
.hero p { font-size:1.1rem; color:var(--muted); max-width:60ch; margin:0; }
h2 { color:var(--navy); margin:2.5rem 0 1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.6rem; }
.card { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .15s; }
.card:hover { box-shadow:0 8px 24px rgba(17,32,55,.12); }
.card a.cov { display:block; background:var(--soft); }
.card a.cov img { display:block; width:100%; aspect-ratio:17/22; object-fit:cover; }
.card .body { padding:.9rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.tag { display:inline-block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--navy); background:var(--gold); padding:.15rem .5rem; border-radius:4px; align-self:flex-start; }
.card h3 { font-size:1.02rem; margin:.2rem 0; line-height:1.3; }
.card h3 a { text-decoration:none; }
.card .meta { color:var(--muted); font-size:.9rem; }
.card .price { font-weight:700; margin-top:auto; }
.btn { display:inline-block; text-decoration:none; font-weight:700; padding:.7rem 1.2rem; border-radius:6px; border:2px solid var(--navy); color:var(--navy); background:#fff; }
.btn.primary { background:var(--gold); border-color:var(--gold); color:var(--navy); }
.btn.dark { background:var(--navy); color:#fff; }
.btn + .btn { margin-left:.6rem; }
.book { display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:2.5rem; padding-top:2.5rem; }
.book .cover img { width:100%; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 30px rgba(17,32,55,.15); }
.book h1 { color:var(--navy); font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.2; margin:.3rem 0 .4rem; }
.book .sub { font-size:1.1rem; color:var(--muted); margin:0 0 1rem; }
.facts { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; color:var(--muted); font-size:.95rem; margin:1rem 0; }
.buy { border:1px solid var(--line); border-radius:10px; padding:1.2rem; margin:1.4rem 0; background:var(--soft); }
.buy .row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0; }
.buy .row + .row { border-top:1px solid var(--line); }
.buy .lbl b { display:block; }
.buy .lbl span { color:var(--muted); font-size:.9rem; }
.check { list-style:none; padding:0; margin:1rem 0; }
.check li { position:relative; padding-left:1.7rem; margin:.45rem 0; }
.check li::before { content:""; position:absolute; left:0; top:.35rem; width:.95rem; height:.95rem; border-radius:50%; background:var(--gold); }
.check li::after { content:""; position:absolute; left:.33rem; top:.5rem; width:.25rem; height:.5rem; border:solid var(--navy); border-width:0 2px 2px 0; transform:rotate(45deg); }
.prose p { margin:.8rem 0; }
.bonus { margin:3rem 0 1rem; padding:2rem; background:var(--navy); color:#fff; border-radius:12px; }
.bonus h2 { color:var(--gold); margin:0 0 .5rem; }
.bonus form { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.bonus input { flex:1 1 240px; padding:.7rem .9rem; border-radius:6px; border:1px solid #fff; font-size:1rem; }
.bonus .msg { margin-top:.6rem; font-weight:600; }
footer { background:var(--navy); color:#c9d3e6; padding:2.5rem 5vw; font-size:.85rem; line-height:1.5; }
footer a { color:#fff; }
footer p { max-width:900px; }
@media (max-width:720px) { .book { grid-template-columns:1fr; } header.top { flex-direction:column; gap:.6rem; } header.top nav a { margin:0 .7rem; } }