* { box-sizing: border-box; }
.welcome-page { margin: 0; background: #17191d; color: #fff0cb; font-family: Georgia, 'Times New Roman', serif; }
.gift-page { position: relative; isolation: isolate; height: 100dvh; min-height: 280px; overflow: hidden; }
.gift-page > picture { position: absolute; inset: 0; z-index: -3; }
.library { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -3; }
.gift-page::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#111b2766, #111b2700 30%, #111b2700 80%, #111b2744); z-index: -2; }
.brand-link { position: absolute; inset: 0 0 auto; z-index: 1; height: clamp(164px, 18dvh, 184px); }
.brand-link:focus-visible { outline: 2px solid #ffe4a6; outline-offset: -6px; border-radius: 4px; }
.gift-page .brand { position: absolute; top: clamp(4px, 1svh, 12px); left: 50%; width: min(62vw, 320px); height: auto; transform: translateX(-50%); filter: drop-shadow(0 3px 10px #100e14b3); pointer-events: none; }
.stage { position: absolute; bottom: 0; left: 50%; width: min(100%, 105dvh, 880px); transform: translateX(-50%) scale(var(--book-scale, .7)); transform-origin: center bottom; }
/* Visible feet end at y=1149 in the 1254px PNG; compensate the transparent bottom margin proportionally. */
.gift-book { position: relative; display: block; width: 100%; aspect-ratio: 1; transform: translateY(8.3732%); container-type: inline-size; color: #51331e; text-decoration: none; -webkit-tap-highlight-color: #dfb97833; }
.gift-book::before { content: ''; position: absolute; inset: 12% 8% 27%; border-radius: 50%; background: #ffe2a3; filter: blur(45px); opacity: .14; z-index: -1; transition: opacity .25s; }
.gift-book:hover::before { opacity: .3; }
.book-link { position: absolute; inset: 0; z-index: 1; border-radius: 5%; }
.book-link:focus-visible { outline: 3px solid #ffe4a6; outline-offset: -4px; }
.book-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Content stays upright; page-surface.js centres it on the paper. */
.dedication { position: absolute; z-index: 2; left: 14.1%; top: 15.5%; width: 33%; height: 50%; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.gift-caption { margin: 0; font-size: clamp(12px, 3.3cqw, 23px); line-height: 1.3; color: #78563b; }
.book-title { position: relative; margin: 3.7cqw 0 0; width: 100%; font-size: clamp(22px, 6.2cqw, 48px); line-height: 1.12; font-weight: 400; text-wrap: balance; }
.book-title svg { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }
.book-title canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.flourish { display: block; width: 34%; height: 1px; margin-top: 3.6cqw; background: linear-gradient(90deg, transparent, #ad7c43, transparent); }
.page-actions { display: flex; flex-direction: column; gap: calc(3cqw + 12px); margin-top: auto; width: 100%; }
.read-invitation { position: relative; display: block; }
.read-invitation canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.read-invitation[hidden] { display: none; }
.store-invitation { position: relative; display: block; color: inherit; text-decoration: none; pointer-events: auto; border-radius: 2.5cqw; }
.store-invitation:focus-visible { outline: 3px solid #9e692f; outline-offset: 2px; }
/* Keep the approved artwork size, with a 44px touch area after the book's responsive scale. */
.store-invitation::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; min-height: calc(44px / var(--book-scale, .7)); height: 100%; transform: translateY(-50%); }
.page-actions svg { display: block; width: 100%; height: auto; overflow: visible; }
.page-actions text { font-family: system-ui, sans-serif; }
.read-label { font-size: clamp(34px, calc(61px - 3cqw), 44px); font-weight: 600; fill: #fff4db; }
.store-prefix { font-size: clamp(25px, calc(43px - 2cqw), 34px); fill: #795638; }
.store-name { font-size: clamp(38px, calc(58px - 2.4cqw), 48px); font-weight: 600; letter-spacing: -.02em; fill: #51331e; }
.store-icon { width: clamp(66px, calc(95px - 3.4cqw), 76px); height: clamp(66px, calc(95px - 3.4cqw), 76px); }
.store-arrow { fill: #947040; font-weight: 400; }
.cover { position: absolute; inset: 0; pointer-events: none; }
.cover img { position: absolute; left: 54%; top: 13.4%; width: 36%; aspect-ratio: 3/4; object-fit: contain; }
.cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover.is-curved img { opacity: 0; }
.legal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; padding: 10px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: linear-gradient(#211a18, #17191d); color: #bcae9b; font: 12px/1.4 system-ui, sans-serif; text-align: center; }
.legal-documents { display: flex; flex-wrap: wrap; justify-content: center; column-gap: clamp(6px, 2vw, 14px); }
.footer-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 4px; }
.footer-contact a { user-select: text; }
.legal-footer a { display: inline-flex; align-items: center; min-height: 28px; padding: 2px; color: #e2d5c2; text-decoration: none; text-shadow: 0 1px 3px #100b09; }
.legal-footer a:hover { color: #fff0d3; text-decoration: underline; text-underline-offset: 3px; }
.legal-footer a:focus-visible { outline: 2px solid #ffe4a6; outline-offset: 2px; border-radius: 2px; }
@media (max-width: 480px) { .terms-detail { display: none; } }
@container (max-width: 380px) { .store-arrow { display: none; } .book-title { margin-top: 2.2cqw; } .flourish { margin-top: 2cqw; } }
@container (max-width: 320px) { .gift-caption { font-size: 10px; } }
@media (orientation: landscape) and (max-height: 600px) { .gift-page .brand { top: 2px; width: min(36vw, 215px); } .brand-link { height: min(116px, 38dvh); } }
/* Keep the glazed dome behind the logo when wide viewports crop the background vertically. */
@media (min-aspect-ratio: 2/1) { .library { object-position: center 35%; } }
@media (min-aspect-ratio: 2/1) and (max-height: 600px) { .library { object-position: center top; } }
@media (prefers-reduced-motion: reduce) { .gift-book::before { transition: none; } }

/* Phones use the available width; the accepted tablet composition keeps its size. */
@media (orientation: portrait) and (max-width: 600px) {
  .stage { --book-scale: 1; width: min(104vw, 90dvh); }
}
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 500px) {
  .stage { --book-scale: .85; }
  .gift-page .brand { width: min(30vw, 160px); }
  .brand-link { height: min(80px, 25dvh); }
}

/* Welcome notice stays at the visible window edge, independently of the footer. */
.cookie-toast { position: fixed; z-index: 100; bottom: max(4px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: 334px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 10px; padding: 4px 10px;
  border-radius: 6px; background: #292929; color: #fff; font: 12px/16px Arial, sans-serif; transition: opacity .2s; }
.cookie-toast[hidden] { display: none; }
.cookie-toast.is-dismissed { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.cookie-copy { flex: 1; min-width: 0; }
.cookie-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cookie-ok { position: relative; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  color: #fff; background: transparent; font: 12px Arial, sans-serif; cursor: pointer; }
.cookie-ok::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#ffffff30 var(--elapsed-angle, 0deg), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); pointer-events: none; }
@media (pointer: coarse) { .cookie-ok::before { content: ''; position: absolute; inset: -9px; } }
@media (prefers-reduced-motion: reduce) { .cookie-toast, .cookie-toast.is-dismissed { transition: none; } }