/* the header symbol */
a.brand { align-items: center !important; }
.book-mark { width: 40px; height: auto; margin-right: 2px; filter: drop-shadow(0 4px 6px rgba(90, 40, 10, .25)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
a.brand:hover .book-mark { transform: rotate(-8deg) scale(1.08); }

/* ---------- the storybook overlay ---------- */
.book-leaf { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
/* the paper-coloured room around the book lives on its own layer, so it can fade (a gradient can't transition) */
.book-leaf::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, #fff9ee 0%, #f6e7cf 70%, #eed8b8 100%); transition: opacity .9s cubic-bezier(.4, 0, .2, 1) .15s; }
.book-hold { position: relative; transition: transform 1.1s cubic-bezier(.45, 0, .15, 1), opacity .8s cubic-bezier(.4, 0, .2, 1) .25s; transform-origin: 75% 50%; will-change: transform, opacity; }
.book-leaf.portrait .book-hold { transform-origin: 50% 50%; }
/* the rust felt hardcover the pages lie on */
.book-board { position: absolute; inset: -16px -18px; border-radius: 14px; background: radial-gradient(120% 120% at 50% 40%, #b8522c, #8e3719); box-shadow: 0 40px 80px -30px rgba(80, 30, 10, .6), inset 0 0 0 3px rgba(255, 210, 160, .12); }
.book-board::before { content: ''; position: absolute; inset: 7px; border-radius: 9px; border: 2px dashed rgba(255, 214, 170, .45); }
.book-board::after { content: ''; position: absolute; top: -4px; bottom: -4px; left: 50%; width: 22px; margin-left: -11px; border-radius: 6px; background: linear-gradient(90deg, #7c2f14, #a7472a 50%, #7c2f14); }
.book-leaf.portrait .book-board::after { display: none; }
.book-leaf.loader .book-board { clip-path: inset(0 0 0 50%); transition: clip-path 1s cubic-bezier(.5, 0, .3, 1) .05s; }
.book-leaf.loader.arrived .book-board { clip-path: inset(0 0 0 0); }
.book-flip { position: relative; z-index: 1; }

/* a page: cream paper, printed like a storybook */
.pg { background: #fdf8ee; overflow: hidden; }
.pg-in { position: relative; height: 100%; box-sizing: border-box; padding: 9% 11% 8%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #2a1e17; font-family: 'Fraunces', Georgia, serif;
  background: url(/book/paper-right.webp) center / cover, radial-gradient(130% 100% at 50% 40%, #fffaf1, #f3e6cf); }
.pg-left .pg-in { background: url(/book/paper-left.webp) center / cover, radial-gradient(130% 100% at 50% 40%, #fffaf1, #f3e6cf); }
.pg-right .pg-in::before, .pg-left .pg-in::before { content: ''; position: absolute; top: 0; bottom: 0; width: 14%; pointer-events: none; }
.pg-right .pg-in::before { left: 0; background: linear-gradient(90deg, rgba(110, 70, 30, .22), rgba(110, 70, 30, 0)); }
.pg-left .pg-in::before { right: 0; background: linear-gradient(-90deg, rgba(110, 70, 30, .22), rgba(110, 70, 30, 0)); }
.pg-no { font: 600 calc(var(--pw) * .028)/1 'Inter', system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #a8532b; }
.pg-art { height: 40%; width: auto; max-width: 80%; object-fit: contain; margin: 5% 0 3%; filter: drop-shadow(0 10px 12px rgba(90, 40, 10, .22)); }
.pg-in h3 { font-size: calc(var(--pw) * .1); font-weight: 600; line-height: 1; margin: 0; letter-spacing: -0.02em; }
.pg-sub { font-size: calc(var(--pw) * .052); color: #b4562c; margin-top: 2%; }
.pg-text { font-size: calc(var(--pw) * .036); line-height: 1.55; margin: 6% 0 0; text-align: left; color: #4a3a2e; }
.pg-text .drop { float: left; font-size: 3.1em; line-height: .85; margin: .06em .08em 0 0; color: #a8532b; font-weight: 600; }
.pg-num { position: absolute; bottom: 4.5%; left: 0; right: 0; font: 500 calc(var(--pw) * .026)/1 'Fraunces', serif; color: #8a7362; }
.pg-orn { font-style: normal; font-size: calc(var(--pw) * .09); color: #b4562c; margin-top: 18%; }
.pg-left blockquote { margin: 8% 4% 4%; font-size: calc(var(--pw) * .075); line-height: 1.15; font-style: italic; font-weight: 500; }
.pg-who { font: 600 calc(var(--pw) * .03)/1 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #8a7362; }
.pg-mark { width: 22%; margin-top: auto; margin-bottom: 8%; opacity: .9; }
.pg-title { justify-content: center; }
.pg-title h3 { font-size: calc(var(--pw) * .12); margin: 6% 0; }
.pg-title .pg-text { text-align: center; }
/* the cover: rust felt with the living book stitched on */
.pg-cover { background: #9c3f1e; }
.pg-cover .pg-in { background: radial-gradient(120% 110% at 50% 35%, #c05a2f, #8e3719); color: #fbe9cf; justify-content: center; }
.pg-cover .pg-in::after { content: ''; position: absolute; inset: 5%; border: 2px dashed rgba(255, 220, 180, .5); border-radius: 8px; pointer-events: none; }
.cv-mark { width: 46%; filter: drop-shadow(0 12px 14px rgba(40, 10, 0, .4)); }
.pg-cover b { display: block; font-size: calc(var(--pw) * .13); font-weight: 600; margin-top: 6%; letter-spacing: -0.02em; }
.pg-cover small { font: 600 calc(var(--pw) * .03)/1 'Inter', sans-serif; letter-spacing: .6em; text-transform: uppercase; opacity: .85; margin-top: 3%; padding-left: .6em; }
.cv-line { display: block; width: 30%; height: 2px; background: rgba(255, 220, 180, .5); margin: 7% 0 5%; }
.pg-cover em { font-size: calc(var(--pw) * .05); opacity: .9; }

/* arrive / leave / step in */
.book-leaf.leaving { animation: bookIn .35s ease both; }
.book-leaf.leaving .book-hold { animation: bookRise .45s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes bookIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bookRise { from { transform: translateY(24px) scale(.96); } to { transform: none; } }
.book-leaf.loader .book-hold { animation: bookRise .6s cubic-bezier(.2, .9, .3, 1) both; }
.book-leaf.step-in::before { opacity: 0; }
.book-leaf.step-in .book-hold { transform: scale(1.7); opacity: 0; }
.book-leaf.step-in { pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .book-leaf { display: none; } }

/* the arrival book is plain HTML (no page-flip): the two pages sit side by side exactly where page-flip left them */
.book-leaf.arrive .book-flip { position: relative; }
.static-pg { position: absolute; top: 0; width: var(--pw); height: var(--ph); }
.static-pg > .pg { width: 100%; height: 100%; }