:root { --paper:#fff8e4; --ink:#173da0; --blue:#1745b8; --blue-dark:#102561; --pink:#f43a8a; --yellow:#ffdb18; --orange:#ff7547; --line:#173da0; --muted:#294886; --selection:#ffdb18; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background-color:var(--paper); background-image:radial-gradient(rgba(23,61,160,.1) .55px,transparent .7px); background-size:5px 5px; font-family:Archivo,Arial,sans-serif; font-size:16px; line-height:1.6; }
::selection { color:var(--ink); background:var(--selection); }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline:3px solid var(--pink); outline-offset:3px; }
.site-header { min-height:72px; padding:0 4vw; display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--ink); gap:1rem; background:var(--paper); }
.wordmark { font:800 1.35rem/.9 "Archivo Narrow",Arial,sans-serif; letter-spacing:-.04em; text-transform:uppercase; text-decoration:none; }
.site-header nav, .site-footer nav { display:flex; align-items:center; gap:1.5rem; font-size:.76rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.site-header nav a { text-decoration:none; }
.nav-buy { color:var(--blue); text-decoration-color:var(--pink); text-decoration-thickness:2px; }
.margin-note { margin:0 0 1rem; color:var(--pink); font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.hero { position:relative; isolation:isolate; min-height:calc(100vh - 72px); overflow:hidden; padding:clamp(3rem,7vw,7rem) max(4vw,1.25rem) clamp(4rem,7vw,7rem); display:grid; grid-template-areas:"copy book" "actions book"; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); align-items:center; gap:clamp(2.5rem,7vw,9rem); background:var(--yellow); }
.hero-copy { grid-area:copy; min-width:0; }
.hero-actions { grid-area:actions; }
.hero::before,.hero::after { content:""; position:absolute; z-index:-1; border-radius:50%; mix-blend-mode:multiply; opacity:.92; }
.hero::before { width:min(48vw,680px); aspect-ratio:1; right:-12vw; top:-18vw; background:var(--pink); }
.hero::after { width:min(35vw,500px); aspect-ratio:1; right:20vw; bottom:-26vw; background:var(--orange); }
.hero-stamp { position:absolute; z-index:0; right:7vw; top:7%; color:var(--blue); font:800 clamp(.7rem,1.2vw,1rem)/.92 "Archivo Narrow",Arial,sans-serif; letter-spacing:.03em; text-align:center; transform:rotate(10deg); }
.hero-stamp--pink { color:var(--pink); text-shadow:1px 0 var(--blue); }
h1,h2,h3 { margin:0; font-weight:800; text-wrap:balance; }
h1 { max-width:9ch; color:var(--blue); font:800 clamp(4rem,9.4vw,8.7rem)/.79 "Archivo Narrow",Arial,sans-serif; letter-spacing:-.055em; text-transform:uppercase; }
h1 span { display:block; position:relative; }
h1 span:nth-child(2) { margin-left:.38em; color:var(--blue); text-shadow:2px 0 var(--pink); }
h1 span:nth-child(3) { margin-left:.1em; }
.hero-title { max-width:36rem; margin:1.8rem 0 0; font-size:.83rem; font-weight:800; letter-spacing:.025em; line-height:1.35; text-transform:uppercase; }
.hero-intro { max-width:35rem; margin:1rem 0 0; color:#17316f; font-size:1.05rem; font-weight:500; }
.hero-actions { display:flex; align-items:end; gap:1rem 1.5rem; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; margin-top:2rem; min-height:50px; padding:.85rem 1.2rem; border:2px solid var(--blue); background:var(--blue); color:#fff; font:800 .78rem/1 Archivo,Arial,sans-serif; letter-spacing:.03em; text-decoration:none; text-transform:uppercase; cursor:pointer; box-shadow:3px 3px 0 var(--pink); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.button:hover { background:var(--blue-dark); box-shadow:3px 3px 0 var(--pink); transform:translate(-1px,-1px); }
.button--quiet { margin:0; color:var(--blue); background:transparent; border-color:var(--blue); box-shadow:none; }
.button--light { border-color:var(--blue); background:var(--yellow); color:var(--blue); box-shadow:3px 3px 0 var(--blue); }
.button--light:hover { background:var(--paper); }
.button--ghost { border-color:var(--paper); background:transparent; color:var(--paper); box-shadow:none; }
.button--ghost:hover { background:var(--paper); color:var(--blue); }
.proof { max-width:24rem; margin:2rem 0 0; color:var(--blue-dark); font-size:.74rem; font-weight:800; letter-spacing:.04em; line-height:1.45; text-transform:uppercase; }
.proof::before { content:""; display:block; width:2.2rem; height:2px; margin-bottom:.5rem; background:var(--pink); }
.proof--light { color:var(--paper); }
.proof--light::before { background:var(--yellow); }
.hero-book { position:relative; z-index:1; grid-area:book; align-self:center; width:min(100%,345px); margin:0; justify-self:center; }
.book-shadow { position:absolute; inset:12px -16px -15px 13px; background:var(--pink); mix-blend-mode:multiply; }
.hero-book img { position:relative; display:block; width:100%; border:2px solid var(--blue); box-shadow:14px 18px 22px rgba(23,61,160,.22); transform:rotate(3deg); }
.hero-book figcaption { margin-top:1.5rem; color:var(--blue); font-size:.68rem; font-weight:800; letter-spacing:.03em; text-align:right; text-transform:uppercase; }
.section, .author-section { max-width:1240px; margin:auto; padding:clamp(5rem,10vw,9rem) 5vw; display:grid; grid-template-columns:130px minmax(0,1fr); gap:clamp(2rem,6vw,7rem); }
.section-sideprint { align-self:start; color:var(--pink); font:800 clamp(1.3rem,2.3vw,2rem)/.83 "Archivo Narrow",Arial,sans-serif; letter-spacing:-.03em; text-transform:uppercase; transform:rotate(-3deg); }
h2 { max-width:13ch; font:800 clamp(3rem,6vw,5.8rem)/.84 "Archivo Narrow",Arial,sans-serif; letter-spacing:-.055em; text-transform:uppercase; }
.prose { max-width:68ch; margin-top:2rem; }
.prose p { margin:0 0 1.2rem; }
.section--book { border-top:2px solid var(--ink); }
.endorsement { position:relative; overflow:hidden; padding:clamp(5rem,10vw,9rem) 8vw; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr); gap:3rem; background:var(--blue); color:var(--paper); }
.endorsement::before { content:""; position:absolute; z-index:0; width:40vw; aspect-ratio:1; border-radius:50%; right:-12vw; top:-13vw; background:var(--pink); mix-blend-mode:screen; opacity:.85; }
.endorsement > * { position:relative; z-index:1; }
.endorsement h2 { max-width:15ch; }
.endorsement-credit { align-self:end; border-top:2px solid var(--yellow); padding-top:1rem; font-size:.88rem; }
.endorsement-credit p { margin:.25rem 0; }
.review-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,5rem); margin:2.5rem 0 2rem; }
blockquote { margin:0; font:700 clamp(1.5rem,2.4vw,2.35rem)/1.05 "Archivo Narrow",Arial,sans-serif; letter-spacing:-.025em; }
cite { display:block; margin-top:1rem; color:var(--muted); font:800 .7rem/1.4 Archivo,Arial,sans-serif; font-style:normal; letter-spacing:.03em; text-transform:uppercase; }
.text-link { color:var(--blue); font-size:.8rem; font-weight:800; text-decoration-color:var(--pink); text-decoration-thickness:2px; text-transform:uppercase; }
.author-section { grid-template-columns:minmax(180px,.45fr) minmax(0,1fr); align-items:start; border-top:2px solid var(--line); }
.author-image-wrap { position:relative; width:min(100%,310px); }
.author-image-wrap::after { content:""; position:absolute; z-index:-1; inset:12px -14px -12px 14px; background:var(--yellow); }
.author-photo { display:block; width:100%; aspect-ratio:1; object-fit:cover; border:2px solid var(--blue); filter:contrast(1.06) saturate(.85); }
.faq { border-top:2px solid var(--line); }
.faq h2 { margin-bottom:2rem; }
details { border-top:2px solid var(--ink); padding:1.1rem 0; }
details:last-child { border-bottom:2px solid var(--ink); }
summary { cursor:pointer; font-size:1rem; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--pink); font:800 1.4rem/1 Archivo,Arial,sans-serif; }
details[open] summary::after { content:"-"; }
details p { max-width:65ch; margin:1rem 2rem .15rem 0; color:var(--muted); }
.closing { padding:clamp(5rem,9vw,8rem) 5vw; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:clamp(3rem,8vw,10rem); background:var(--blue); color:var(--paper); }
.closing h2 { max-width:12ch; }
.signup { padding-top:1.4rem; border-top:2px solid rgba(255,248,228,.35); }
.signup h3 { font:800 2.1rem/.9 "Archivo Narrow",Arial,sans-serif; letter-spacing:-.04em; text-transform:uppercase; }
.signup > p { margin:.75rem 0 1.4rem; color:var(--paper); font-size:.9rem; font-weight:500; }
.signup form { display:grid; gap:.45rem; }
.signup label { font-size:.75rem; font-weight:700; }
.signup input { min-height:44px; padding:.65rem .75rem; border:2px solid var(--blue); border-radius:0; background:var(--paper); color:var(--ink); font:400 1rem Archivo,Arial,sans-serif; }
.signup input[aria-invalid="true"] { border-color:var(--yellow); }
.field-error { margin:-.05rem 0 .35rem; color:var(--yellow); font-size:.76rem; font-weight:700; }
.form-error-summary { margin:0 0 .6rem; padding:.55rem .7rem; border:2px solid var(--yellow); background:rgba(255,219,24,.14); color:var(--paper); font:800 .72rem/1.4 Archivo,Arial,sans-serif; letter-spacing:.03em; text-transform:uppercase; }
.signup form .button { justify-self:start; margin-top:.8rem; }
.signup .privacy-note { margin-top:1rem; font-size:.72rem; }
.site-footer { padding:1.6rem 5vw; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; background:var(--blue); color:var(--paper); }
.site-footer p { margin:0; font-size:.72rem; }
.site-footer a { color:#fff; }
.mobile-buy { display:none; }
.flash { padding:.85rem 1.25rem; text-align:center; font:800 .78rem/1.4 Archivo,Arial,sans-serif; letter-spacing:.03em; text-transform:uppercase; }
.flash--notice { border-bottom:2px solid var(--blue); background:var(--yellow); color:var(--blue); }
.flash--alert { border-bottom:2px solid var(--yellow); background:var(--blue); color:var(--paper); }
.page-hero { max-width:1120px; margin:auto; padding:clamp(4rem,9vw,8rem) 5vw clamp(3rem,6vw,5rem); border-bottom:2px solid var(--ink); }
.page-hero h1 { max-width:11ch; font-size:clamp(3.75rem,8vw,7.5rem); }
.page-hero p:not(.margin-note) { max-width:58ch; margin:1.5rem 0 0; color:var(--muted); }
.page-content { max-width:920px; margin:auto; padding:clamp(3rem,7vw,6rem) 5vw; }
.review-list { display:grid; gap:0; }
.review-list blockquote { padding:2.25rem 0; border-top:1px solid var(--line); }
.review-list blockquote:last-child { border-bottom:1px solid var(--line); }
.details-list { margin:0; display:grid; grid-template-columns:1fr 2fr; border-top:2px solid var(--ink); }
.details-list dt,.details-list dd { margin:0; padding:1rem 0; border-bottom:2px solid var(--line); }
.details-list dt { color:var(--muted); font-family:Archivo,Arial,sans-serif; font-size:.73rem; font-weight:800; text-transform:uppercase; }
.policy h2 { max-width:none; margin:3rem 0 1rem; font-size:2.25rem; }
.policy p,.policy li { max-width:68ch; }
.stores-heading { margin:3rem 0 1.25rem; color:var(--blue); font:800 clamp(1.4rem,3vw,2.1rem)/1 "Archivo Narrow",Arial,sans-serif; letter-spacing:-.03em; text-transform:uppercase; }
.store-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.store-tile { display:flex; flex-direction:column; justify-content:space-between; gap:1rem; padding:1.1rem 1.2rem; border:2px solid var(--blue); background:var(--paper); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.store-tile:hover { background:#fff; box-shadow:3px 3px 0 var(--pink); transform:translate(-1px,-1px); }
.store-tile--lead { padding:1.6rem 1.5rem; background:var(--yellow); }
.store-tile--lead:hover { background:var(--paper); }
.store-head { display:flex; flex-direction:column; gap:.35rem; }
.store-name { font:800 1.15rem/1.05 "Archivo Narrow",Arial,sans-serif; letter-spacing:-.02em; text-transform:uppercase; }
.store-tile--lead .store-name { font-size:1.5rem; }
.store-domain { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.store-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.store-action { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .7rem; border:2px solid var(--blue); background:transparent; color:var(--blue); font:800 .68rem/1 Archivo,Arial,sans-serif; letter-spacing:.03em; text-decoration:none; text-transform:uppercase; transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease; }
.store-action:hover { background:var(--blue); color:#fff; box-shadow:2px 2px 0 var(--pink); transform:translate(-1px,-1px); }
.stores-note { margin-top:2.5rem; color:var(--muted); font-size:.74rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.consent-banner { position:fixed; z-index:20; right:1.25rem; bottom:1.25rem; width:min(430px,calc(100vw - 2.5rem)); padding:1.15rem; background:var(--paper); border:2px solid var(--blue); box-shadow:8px 9px 0 var(--pink); }
.consent-banner p { margin:0; font-size:.82rem; line-height:1.45; }
.consent-actions { display:flex; gap:.65rem; margin-top:1rem; }
.consent-actions .button { margin:0; }
@media (max-width:720px) { .site-header { min-height:64px; padding:0 1.25rem; } .site-header nav a:not(.nav-buy) { display:none; } .hero { min-height:auto; padding:3rem 1.25rem 3rem; display:flex; flex-direction:column; align-items:stretch; gap:1.5rem; } .hero-stamp { right:5%; top:5%; } h1 { font-size:clamp(2.9rem,12vw,4rem); } .hero-book { width:58%; margin:0 auto; } .hero-book figcaption { text-align:left; } .hero-actions { margin-top:.35rem; } .section,.author-section { padding:4rem 1.25rem; grid-template-columns:1fr; gap:1.35rem; } .section-sideprint { font-size:1.15rem; } h2 { font-size:clamp(2.8rem,13vw,4.2rem); } .endorsement,.closing { padding:4rem 1.25rem; grid-template-columns:1fr; gap:2.5rem; } .review-pair { grid-template-columns:1fr; gap:2rem; } .author-section { grid-template-columns:110px 1fr; gap:1.4rem; } .author-image-wrap { width:110px; } .site-footer { padding:1.5rem 1.25rem 5.5rem; align-items:flex-start; flex-direction:column; } .site-footer nav { flex-wrap:wrap; gap:.75rem 1rem; } .mobile-buy { position:fixed; z-index:10; display:flex; justify-content:center; gap:.6rem; left:0; right:0; bottom:0; padding:1rem; background:var(--blue); color:#fff; font-size:.82rem; font-weight:800; text-decoration:none; text-transform:uppercase; } .page-hero,.page-content { padding-left:1.25rem; padding-right:1.25rem; } .details-list { grid-template-columns:1fr; } .details-list dt { padding-bottom:.2rem; border-bottom:0; } .details-list dd { padding-top:.1rem; } .consent-banner { bottom:4.5rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; } }