/* Based on the es/ ebook landing page styles. */
:root{--bg:#FBF7F0;--paper:#F4EDE2;--ink:#1E2A3F;--text:#28323F;--mute:#5B6577;--coral:#C24E2E;--teal:#17706B;--mint:#DCEFEC;--line:rgba(30,42,63,.12)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
html,body{margin:0;background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;overflow-x:clip}
body{font:16px/1.6 Inter,system-ui,-apple-system,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
.btn{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:12px;background:var(--coral);color:#fff;font:600 16.5px Inter,sans-serif;text-decoration:none;box-shadow:0 10px 22px -12px rgba(194,78,46,.9);border:0;cursor:pointer}
.btn:hover{background:#A9401F;color:#fff}
.checkout-loading{opacity:.65;pointer-events:none;cursor:wait}

/* top bar */
.bar{position:sticky;top:0;z-index:40;background:rgba(251,247,240,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .in{max-width:680px;margin:0 auto;padding:7px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px}
.bar .bk{display:flex;align-items:center;gap:9px;min-width:0;flex:1;color:var(--ink);text-decoration:none}
.bar .bk img{width:24px;border-radius:2px;box-shadow:0 2px 6px rgba(30,42,63,.25)}
.bar .bk span{font:600 14px/1.2 Inter,sans-serif;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .buy{flex:0 0 auto;min-height:40px;padding:0 14px;font-size:14px;border-radius:10px;box-shadow:none;background:transparent;color:var(--coral);border:1.5px solid var(--coral)}
.bar .buy:hover{background:var(--coral);color:#fff}
.prog{height:3px;background:var(--teal);transform-origin:0 50%;transform:scaleX(0)}

/* compact opening */
.open{max-width:680px;margin:0 auto;padding:16px 20px 14px;display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line)}
.open img{width:56px;flex:0 0 56px;border-radius:2px 4px 4px 2px;box-shadow:0 10px 20px -10px rgba(30,42,63,.5)}
.open h1{margin:0 0 3px;font:700 clamp(19px,3vw,23px)/1.15 Fraunces,Georgia,serif;color:var(--ink);text-wrap:balance}
.open .hk{margin:0 0 3px;font-size:14px;line-height:1.4;color:var(--mute)}
.open .by{margin:0;font-size:13px;color:var(--mute)}

/* reading column */
.book{max-width:680px;margin:0 auto;padding:4px 20px 0;font-family:Literata,Georgia,serif;font-size:clamp(18px,1.6vw,19.5px);line-height:1.72;color:var(--text)}
.book p{margin:0 0 1.05em;text-wrap:pretty}
.book header{margin:2.4em 0 1.2em}
.book header:first-child{margin-top:1.4em}
.book header p{margin:0 0 6px;font:600 12.5px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.book header h2{margin:0;font:700 clamp(26px,4.4vw,34px)/1.12 Fraunces,Georgia,serif;color:var(--ink);text-wrap:balance}
.book header.chap{padding-top:1.6em;border-top:1px solid var(--line)}
.book header.chap:first-child{padding-top:0;border-top:0}
.book h3{margin:1.9em 0 .6em;font:700 clamp(21px,2.6vw,25px)/1.25 Fraunces,Georgia,serif;color:var(--ink)}
.book strong{font-weight:600;color:var(--ink)}
.book .brk{text-align:center;letter-spacing:.6em;color:var(--mute);margin:1.6em 0}

/* blurred preview right after the free cut */
.preview{position:relative;max-height:9.5em;overflow:hidden;user-select:none;-webkit-user-select:none}
.preview p{filter:blur(4px);opacity:.75}
.preview::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(251,247,240,0) 0,var(--bg) 92%)}

/* paywall card */
.pay{max-width:680px;margin:0 auto;padding:0 20px 40px}
.pay .box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 20px;box-shadow:0 24px 60px -34px rgba(30,42,63,.5)}
.pay .end{margin:0 0 6px;font:600 12.5px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);text-align:center}
.pay h2{margin:0 0 8px;font:700 clamp(24px,4.2vw,32px)/1.15 Fraunces,Georgia,serif;color:var(--ink);text-align:center;text-wrap:balance}
.pay .lead{margin:0 auto 16px;max-width:480px;text-align:center;color:var(--mute)}
.pay .row{display:flex;gap:18px;align-items:center;justify-content:center;margin:14px 0 18px}
.pay .row img{width:84px;border-radius:2px 5px 5px 2px;box-shadow:0 16px 30px -12px rgba(30,42,63,.55)}
.pay .amt{font:700 42px/1 Fraunces,Georgia,serif;color:var(--ink)}
.pay .amt small{display:block;margin-top:8px;font:500 13.5px/1.4 Inter,sans-serif;color:var(--mute);max-width:220px}
.pay .btn{max-width:420px;margin:0 auto;min-height:56px;font-size:17px}
.pay .as{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;font-size:13.5px;color:var(--mute);text-align:center}
.pay .again{display:none;margin:14px 0 0;text-align:center;font-size:14.5px}
.pay .again.on{display:block}

/* reader */
.note{max-width:680px;margin:14px auto 0;padding:0 20px}
.note p{margin:0;padding:12px 14px;border-radius:12px;background:var(--mint);font-size:14.5px;line-height:1.45;color:var(--ink)}
.toc{max-width:680px;margin:0 auto;padding:10px 20px 0;font-family:Inter,sans-serif}
.toc summary{cursor:pointer;font-weight:600;color:var(--ink);min-height:44px;display:flex;align-items:center}
.toc ol{margin:0 0 12px;padding-left:1.4em}
.toc li{margin:0 0 6px}
.toc a{color:var(--ink);text-decoration:none}
.cont{display:flex;align-items:center;gap:10px;margin:1.6em 0;font:600 12.5px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.cont::before,.cont::after{content:"";flex:1;height:1px;background:var(--teal);opacity:.4}

footer{max-width:680px;margin:0 auto;padding:24px 20px 40px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--mute)}
footer p{margin:0 0 6px}
footer a{color:var(--mute)}
@media(max-width:520px){.bar .in{padding-left:14px;padding-right:14px}.bar .buy{padding:0 10px;font-size:13.5px;white-space:nowrap}}

/* POV marker: a paragraph that is only **Name** */
.book p.pov{display:flex;align-items:center;gap:10px;margin:1.9em 0 1em;font:600 12.5px/1.2 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.book p.pov::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.7}
.book header + p.pov{margin-top:.4em}

/* mobile bottom buy bar: from chapter 2 until the paywall is on screen */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -10px 30px -16px rgba(30,42,63,.35);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.sbar.on{transform:none;visibility:visible;transition:transform .25s ease}
.sbar .in{max-width:680px;margin:0 auto;padding:8px 14px calc(8px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.sbar .tx{flex:1;min-width:0;font:600 14px/1.25 Inter,sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar .tx small{display:block;font-weight:400;font-size:12px;line-height:1.3;color:var(--mute);white-space:normal}
.sbar .btn{flex:0 0 auto;min-height:44px;font-size:15px;padding:0 16px;box-shadow:none}
@media(min-width:601px){.sbar{display:none}}
@media(max-width:600px){.bar .buy{display:none}}

/* reader: contents link + resume banner */
.bar .tocl{flex:0 0 auto;display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:10px;font:600 14px Inter,sans-serif;color:var(--ink);text-decoration:none}
.bar .tocl:hover{background:var(--paper)}
.resume{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:4px;max-width:calc(100vw - 24px);padding:6px 6px 6px 8px;background:var(--ink);border-radius:14px;box-shadow:0 16px 36px -14px rgba(30,42,63,.6)}
.resume[hidden]{display:none}
.resume button{border:0;background:none;color:#fff;font:600 15px Inter,sans-serif;cursor:pointer;min-height:44px}
.resume .go{padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume .x{width:40px;font-size:20px;opacity:.7}

/* footer links + legal pages */
footer .links{display:flex;flex-wrap:wrap;gap:0 18px}
footer .links a{display:inline-flex;align-items:center;min-height:40px}
.legal{max-width:680px;margin:0 auto;padding:28px 20px 10px;font-size:16px;line-height:1.65;color:var(--text)}
.legal h1{margin:0 0 4px;font:700 clamp(26px,4.4vw,34px)/1.15 Fraunces,Georgia,serif;color:var(--ink)}
.legal .upd{margin:0 0 20px;font-size:14px;color:var(--mute)}
.legal h2{margin:1.6em 0 .4em;font:600 18px/1.3 Inter,sans-serif;color:var(--ink)}
.legal p{margin:0 0 1em}

/* free-preview note under the title; after-payment note in the paywall card */
.open .fi{margin:5px 0 0;display:inline-block;padding:3px 9px;border-radius:999px;background:var(--mint);font:600 12.5px/1.35 Inter,sans-serif;color:var(--teal)}
.pay .after{margin:6px auto 0;max-width:420px;text-align:center;font-size:13.5px;line-height:1.45;color:var(--mute)}
/* desktop top-bar button: hidden until the reader reaches chapter 2 */
.bar .buy{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.bar .buy.on{opacity:1;visibility:visible;transition:opacity .25s ease}

/* top bar: hidden while the hero is on screen, slides in once it has scrolled away */
.bar{position:fixed;left:0;right:0;top:0;transform:translateY(-105%);transition:transform .22s ease}
.bar.on{transform:none}

/* hero: what this is (one novel), by whom, the hook, and where to start */
.hero{max-width:680px;margin:0 auto;padding:22px 20px 22px;display:grid;grid-template-columns:104px 1fr;column-gap:16px;align-items:center;border-bottom:1px solid var(--line)}
.hero .cv{width:104px;height:auto;border-radius:3px 6px 6px 3px;box-shadow:0 16px 30px -12px rgba(30,42,63,.6)}
.hero .gn{margin:0 0 6px;font:700 11.5px/1.35 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.hero h1{margin:0 0 6px;font:700 clamp(25px,4.8vw,32px)/1.08 Fraunces,Georgia,serif;color:var(--ink);text-wrap:balance}
.hero .by{margin:0;font-size:14.5px;color:var(--mute)}
.hero .hk{grid-column:1/-1;margin:16px 0 16px;font:italic 400 17.5px/1.5 Literata,Georgia,serif;color:var(--text);text-wrap:pretty}
.hero .start{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:12px;background:var(--ink);color:#fff;font:600 16px Inter,sans-serif;text-decoration:none}
.hero .start:hover{background:#2c3b55;color:#fff}
@media(min-width:601px){.hero{grid-template-columns:132px 1fr;column-gap:22px}.hero .cv{width:132px}.hero .start{justify-self:start}}

/* Wallet hint above the paywall button: Apple Pay / Google Pay pay without the bank's extra check, so they fail far less. */
.pay .wallet{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;max-width:420px;margin:0 auto 12px;padding:12px 14px;border:1.5px solid #9FD3CB;border-radius:12px;background:#E9F6F3;text-align:center}
.pay .wallet .wt{flex-basis:100%;font:600 15px/1.35 Inter,sans-serif;color:#0F5E5A}
.pay .wp{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:7px;font:600 13.5px/1 Inter,sans-serif;letter-spacing:.01em;white-space:nowrap}
.pay .wp.ap,.pay .wp.gp{background:#fff;color:#1E2A3F;border:1px solid #9FB3B0}
.w-apple .pay .wp.gp,.w-google .pay .wp.ap{display:none}
.sbar .tx small[data-wallet-apple]{color:#0F5E5A;font-weight:600}
/* Back-from-checkout prompt: shown only to readers who opened checkout and came back without reaching the reader. */
.retry{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 12px calc(12px + env(safe-area-inset-bottom));animation:retry-in .25s ease-out}
.retry[hidden]{display:none}
.retry .in{position:relative;max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px 18px;box-shadow:0 18px 50px -12px rgba(30,42,63,.45);text-align:center}
.retry .t{margin:0 28px 6px;font:700 18px/1.3 Fraunces,Georgia,serif;color:var(--ink)}
.retry .d{margin:0 0 14px;font-size:14.5px;line-height:1.45;color:var(--mute)}
.retry .btn{max-width:360px;margin:0 auto;min-height:50px}
.retry .x{position:absolute;top:6px;right:6px;width:40px;height:40px;border:0;background:none;font:400 26px/1 Inter,sans-serif;color:var(--mute);cursor:pointer}
@keyframes retry-in{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.retry{animation:none}}