@font-face{font-family:Typewriter;src:url('assets/american-typewriter.woff2')}@font-face{font-family:Inter;src:url('assets/inter-medium.woff2')}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f7f0;color:#163b3b;font-family:Inter,Arial,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}header,footer{max-width:1440px;margin:auto;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;gap:24px}header>span,.eyebrow{font-size:12px;letter-spacing:.17em;text-transform:uppercase;line-height:1.8}header>a:last-child{border-bottom:0;padding:12px 0;font-size:14px}.hero-background{background:#deebe6}.hero{max-width:1440px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:720px}.intro{padding:64px 12% 72px 10%}.eyebrow{color:#a83f29}h1,h2,blockquote{font-family:Typewriter,Georgia,serif;font-weight:400}h1{font-size:clamp(48px,5.6vw,84px);line-height:1.04;letter-spacing:-.05em;margin:28px 0}.author{font-size:18px}.lede{font-size:17px;line-height:1.8;max-width:360px;margin:28px 0}.button{display:inline-flex;background:#ff795b;padding:18px 24px;gap:40px;border:1px solid #163b3b;font-size:15px}.button:hover{background:#ff987f}figure{margin:0;align-self:stretch;padding:65px 9%;display:flex;flex-direction:column;justify-content:center;align-items:center}figure img{filter:drop-shadow(0 18px 18px #163b3bb8);transform:rotate(-4deg);width:100%}figcaption{font-family:Typewriter,Georgia,serif;font-size:16px;margin-top:45px;text-align:center}.story{max-width:1150px;margin:auto;padding:110px 6%;display:grid;grid-template-columns:1fr 2fr;gap:50px}.story .eyebrow{margin-top:12px}h2{font-size:clamp(35px,4vw,54px);line-height:1.12;letter-spacing:-.04em;margin:0 0 32px}.story p:not(.eyebrow){font-size:17px;line-height:1.85;margin:0 0 24px}blockquote{font-size:clamp(28px,3vw,40px);line-height:1.25;margin:40px 0;color:#a83f29}.purchase{text-align:center;background:#deebe6;padding:70px 24px 80px}.purchase h2{margin:18px 0}.purchase>p:not(.eyebrow){font-size:14px}.paypal-slot{margin:36px auto 0;max-width:440px;min-height:126px;border:1px dashed #163b3b55;background:#f7f7f080;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.paypal-slot small{font-size:11px;color:#4b6863}footer{padding-block:40px;font-size:13px}footer>a:first-child{display:flex;align-items:center;gap:26px}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;padding:16px;background:white;z-index:2}:focus-visible{outline:3px solid #a83f29;outline-offset:5px}@media(max-width:700px){header>span{display:none}header{padding:18px 6%}.hero{display:flex;flex-direction:column;min-height:0}.intro{padding:45px 7% 50px;width:100%}h1{font-size:60px}figure{padding:50px 16%;width:100%}.story{display:block;padding:60px 7%}.story>.eyebrow{margin-bottom:28px}footer,footer>a:first-child{align-items:flex-start;flex-direction:column}footer{padding:32px 7%}.purchase{padding:55px 7%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Match the publisher page's once-only, 22px upward reveal. */
.reveal--pending{opacity:0;transform:translate3d(0,18px,0)}
.reveal--visible{opacity:1;transform:translate3d(0,0,0);transition:opacity 800ms ease-out,transform 800ms cubic-bezier(.22,.61,.36,1)}
figure .book-cover.reveal--pending{transform:translate3d(0,28px,0) rotate(-10deg) scale(.97)}
figure .book-cover.reveal--visible{transform:translate3d(0,0,0) rotate(-4deg) scale(1);transition:opacity 850ms ease,transform 1100ms cubic-bezier(.2,.65,.3,1)}
@media(prefers-reduced-motion:reduce){.reveal--pending,.reveal--visible{opacity:1;transform:none;transition:none}figure .book-cover.reveal--pending,figure .book-cover.reveal--visible{transform:rotate(-4deg);transition:none}}
@media print{.reveal--pending,.reveal--visible{opacity:1;transform:none;transition:none}}

/* Full-width illustrated purchase section, with a quiet reading surface. */
.purchase{background:#deebe6 url('assets/sea-and-sky.avif') center center/cover no-repeat;padding:100px 24px 120px}
.purchase__panel{max-width:850px;margin:auto;padding:45px 40px;background:rgb(247 247 240 / 34%);box-shadow:0 12px 45px rgb(22 59 59 / 8%);border-radius: 20px;}
.purchase__panel>p:not(.eyebrow){font-size:14px;line-height:1.7}
.paypal-slot{background:#f7f7f0}
footer{display:block;max-width:none;padding:0}
.footer-main{max-width:1440px;margin:auto;padding:40px 5%;display:flex;align-items:center;justify-content:space-between;gap:26px}
.footer-main>a:first-child{display:flex;align-items:center;gap:26px}
.site-footer__bottom{border-top:1px solid rgb(22 59 59 / 20%);background:#deebe6}
.site-footer__bottom-inner{max-width:1440px;margin:auto;padding:24px 5%}
.site-footer__copyright{margin:0;font-size:clamp(.825rem,.775rem + .08vw,.95rem);line-height:1.7}
@media(max-width:700px){.purchase{padding:60px 7% 80px}.purchase__panel{padding:45px}.footer-main,.footer-main>a:first-child{flex-direction:column;align-items:flex-start}.footer-main{padding:32px 7%}.site-footer__bottom-inner{padding:24px 7%}}

/* Frosted ivory panel; retain a readable fallback without backdrop-filter. */
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  .purchase__panel{background:rgb(247 247 240 / 72%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}

/* Hosted checkout sits within the frosted purchase panel. */
.paypal-checkout{width:100%;max-width:440px;margin:32px auto 0;text-align:center;min-width:0}
.paypal-checkout>div{width:100%;min-width:0}
.paypal-status,.paypal-checkout noscript p{font-size:13px;line-height:1.7;color:#163b3b}
.paypal-checkout a{text-decoration:underline;text-underline-offset:3px}
.paypal-status[hidden]{display:none}

.book-cover{border-radius:10px}

.button{border-radius:10px}

/* Shared responsive header and footer type scale from Tŷ Morgi. */
header>span{font-size:clamp(.825rem,.775rem + .08vw,.95rem)}
header>a:last-child{font-size:clamp(.9125rem,.85rem + .1vw,1rem)}
.footer-main{flex-wrap:wrap}
.footer-main>a:first-child>span{font-size:clamp(.825rem,.775rem + .08vw,.95rem);line-height:1.7}
.footer-main>a[href^="mailto:"]{font-family:Typewriter,Georgia,serif;font-weight:400;font-size:clamp(1.125rem,.9rem + 2.5vw,3.5rem);line-height:1.3;letter-spacing:-.04em;max-width:100%;overflow-wrap:anywhere}
@media(max-width:42rem){.footer-main>a[href^="mailto:"]{font-size:clamp(1.125rem,.85rem + 2vw,2rem)}}

/* Match Tŷ Morgi's directional arrow movement. */
.link-arrow{display:inline-block;transition:transform 220ms ease}
a:focus-visible .link-arrow{transform:translate(3px,-3px)}
a:focus-visible .link-arrow--down{transform:translateY(4px)}
@media(hover:hover){
  a:hover .link-arrow{transform:translate(3px,-3px)}
  a:hover .link-arrow--down{transform:translateY(4px)}
}
@media(prefers-reduced-motion:reduce){
  .link-arrow{transition:none}
  a:hover .link-arrow,a:focus-visible .link-arrow{transform:none}
}

.footer-main>a[href^="mailto:"]{display:inline-flex;align-items:center;gap:.4em;min-width:0}
.footer-main>a[href^="mailto:"]>span{min-width:0}
.footer-email-arrow{display:block;width:1.1em;height:1.1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Match the publisher site's responsive logo dimensions. */
header>a:first-child img{width:clamp(6rem,4rem + 4vw,8rem);height:auto}
.footer-main>a:first-child img{width:clamp(7rem,4rem + 6vw,10rem);height:auto;flex:0 0 auto}

header>a:last-child{display:inline-flex;align-items:center;gap:.65em}
.header-link-arrow{display:block;width:1.1em;height:1.1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.region-choice,.geoip-attribution{font-size:13px;line-height:1.7}.region-choice{margin-top:24px}.geoip-attribution{margin:12px 0 0}.geoip-attribution a{text-decoration:underline}

.eyebrow{font-size:clamp(.825rem, .775rem + .08vw, .95rem)}

/* Give the hosted widget a definite width without flex shrink-to-fit. */
#paypal-button{display:block;width:100%;min-width:0;margin-inline:auto;text-align:center}
#paypal-button>div{width:100%;max-width:100%;margin-inline:auto}
#paypal-button iframe{display:block;margin-inline:auto;max-width:100%}

/* PayPal's medium blocks are 399px inside the 440px mount. */
#paypal-button .medium{margin-inline:auto;max-width:100%}

@font-face{font-family:Inter;src:url('assets/inter-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
.button{border-radius:10px;max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:1.25rem;min-height:3.25rem;padding:.875rem 1.75rem;border:1px solid #102525;background:#ff795b;color:#102525;font-size:clamp(1rem,.94rem + .2vw,1.125rem);line-height:1.5;font-weight:600;transition:background-color 220ms ease}
.button>span{min-width:0}
.button__arrow{display:block;width:1.1rem;height:1.1rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms ease}
.button:focus-visible .button__arrow{transform:translate(3px,-3px)}
@media(hover:hover){.button:hover{background:#ff8c71}.button:hover .button__arrow{transform:translate(3px,-3px)}}
/* Keep the existing entrance animation alongside the shared button hover. */
.button.reveal--visible{transition:opacity 800ms ease-out,transform 800ms cubic-bezier(.22,.61,.36,1),background-color 220ms ease}
@media(prefers-reduced-motion:reduce){.button,.button.reveal--visible,.button__arrow{transition:none}.button .button__arrow{transform:none}}

/* Prepare nearby reveal layers before iOS Safari scrolls them into view. */
.reveal--prepared { will-change: opacity, transform; }

/* Explicit keyframes do not depend on Safari painting an offscreen before-state. */
@keyframes reveal-up {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.reveal--visible, .button.reveal--visible { transition: none; }
.reveal--animating { animation: reveal-up 800ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes reveal-book {
  from { opacity: 0; transform: translate3d(0,28px,0) rotate(-10deg) scale(.97); }
  to { opacity: 1; transform: translate3d(0,0,0) rotate(-4deg) scale(1); }
}
figure .book-cover.reveal--visible { transition: none; }
figure .book-cover.reveal--animating { animation: reveal-book 1100ms cubic-bezier(.2,.65,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal].reveal--animating { animation: none; }
}
@media print {
  [data-reveal].reveal--animating { animation: none; }
}
