:root { --plum: #2d1730; --plum-light: #56305a; --cream: #f6f0df; --green: #314b36; --orange: #c85c2b; --paper: #fffaf0; --line: rgba(45, 23, 48, .2); --serif: Georgia, "Times New Roman", serif; --sans: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--plum); background: linear-gradient(125deg, #eee1c8, var(--cream) 55%, #e3e8d0); font-family: var(--sans); line-height: 1.55; }
body::before { position: fixed; inset: 0; z-index: -1; content: ""; opacity: .32; pointer-events: none; background-image: radial-gradient(rgba(45,23,48,.18) .5px, transparent .5px); background-size: 5px 5px; }
a { color: inherit; } .book-page, footer { width: min(100% - 2.5rem, 1120px); margin: auto; }
.book-header { padding: 1.5rem 0; display:flex; justify-content:space-between; align-items:center; color:var(--green); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.publisher-mark { color: var(--plum); font-family:var(--serif); font-size:1.1rem; font-weight:700; letter-spacing:normal; text-decoration:none; text-transform:none; }
.book-hero { padding: clamp(2rem, 6vw, 5.5rem) 0 clamp(4rem, 8vw, 8rem); display:grid; grid-template-columns: minmax(16rem,.77fr) minmax(18rem,1fr); align-items:center; gap:clamp(3rem,9vw,9rem); }
.book-cover-wrap { display:grid; place-items:center; } .book-cover { width:min(100%, 355px); height:auto; box-shadow: 20px 25px 45px rgba(45,23,48,.25), 1px 1px 0 rgba(45,23,48,.2); }
.book-kicker { margin:0 0 1.15rem; color:var(--orange); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1, h2 { margin:0; font-family:var(--serif); font-weight:400; line-height:.96; } h1 { max-width:10ch; font-size:clamp(3.8rem, 7.6vw, 6.8rem); letter-spacing:-.055em; } .subtitle { margin:1.25rem 0 2.4rem; color:var(--green); font-family:var(--serif); font-size:clamp(1.25rem,2.2vw,1.65rem); font-style:italic; }
.book-credit { margin:0; padding:1.2rem 0; border-block:1px solid var(--line); display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } .book-credit dt { color:var(--green); font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .book-credit dd { margin:.2rem 0 0; font-size:.95rem; } .synopsis { max-width:38rem; margin:2rem 0 0; font-family:var(--serif); font-size:1.2rem; }
.signup-section { border-top:1px solid var(--line); padding:clamp(3rem,6vw,5.5rem) 0; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem, 8vw, 7rem); } h2 { font-size:clamp(3rem,6vw,5rem); letter-spacing:-.05em; } .serious { margin:.45rem 0; color:var(--green); font-family:var(--serif); font-style:italic; }
.signup-panel { padding:clamp(1.5rem,4vw,2.5rem); background:rgba(255,250,240,.67); box-shadow: 10px 11px 0 rgba(86,48,90,.14); } .signup-prompt { margin:0 0 1.2rem; font-family:var(--serif); font-size:1.24rem; } label { display:block; margin-bottom:.45rem; color:var(--green); font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .form-row { display:flex; gap:.6rem; } input { min-width:0; flex:1; border:1px solid var(--plum-light); border-radius:0; padding:.8rem .9rem; color:var(--plum); background:var(--paper); font:inherit; } button { border:1px solid var(--plum); padding:.8rem 1.1rem; color:var(--cream); background:var(--plum); font:700 .75rem var(--sans); letter-spacing:.05em; text-transform:uppercase; cursor:pointer; } button:hover, button:focus-visible { background:var(--orange); } button:disabled { cursor:wait; opacity:.65; } input:focus-visible, button:focus-visible, a:focus-visible { outline:3px solid var(--orange); outline-offset:3px; } .turnstile-slot { min-height:0; margin-top:1rem; } .form-message { min-height:1.5em; margin:1rem 0 0; color:var(--green); font-weight:700; } .form-message[data-state="error"] { color:#9a2c23; } .form-note { margin:1rem 0 0; color:#5f4c52; font-size:.79rem; } footer { padding:1.5rem 0 2.5rem; border-top:1px solid var(--line); color:var(--green); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width: 700px) { .book-page, footer { width:min(100% - 2rem, 1120px); } .book-header { padding-top:1.1rem; } .book-hero, .signup-section { grid-template-columns:1fr; } .book-hero { padding-top:2rem; gap:3rem; } .book-cover { width:min(78vw,330px); } h1 { max-width:11ch; } .form-row { flex-direction:column; } button { min-height:3rem; } }