:root { --navy: #17324d; --navy-deep: #0d2236; --cream: #fffaf0; --gold: #e2ad45; --rust: #b7563c; --ink: #213040; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); font-family: "DM Sans", sans-serif; background: radial-gradient(circle at 12% 15%, rgba(226,173,69,.16), transparent 20rem), radial-gradient(circle at 85% 75%, rgba(34,88,122,.14), transparent 25rem), #eee8de; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .28; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
button { font: inherit; }
.page-shell { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 2rem 5vw 1.4rem; isolation: isolate; }
.eyebrow { margin: 0 0 1rem; color: #6c7072; font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.card-stage { width: min(86vw, 980px); height: min(66vw, 600px); min-height: 420px; max-height: 70vh; perspective: 2200px; filter: drop-shadow(0 25px 28px rgba(30,38,45,.2)); }
.card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.popcorn-burst { position:absolute; left:51%; top:47%; width:1px; height:1px; pointer-events:none; z-index:4; }
.popcorn-burst span { position:absolute; left:0; top:0; width:24px; height:22px; border:2px solid #c9922e; border-radius:48% 52% 44% 56%; background:#fff5c9; opacity:0; box-shadow:inset -3px -4px rgba(224,166,56,.18),0 4px 6px rgba(47,37,20,.14); animation:burst-popcorn 1.55s cubic-bezier(.16,.72,.27,1) var(--pop-delay) forwards; }
.popcorn-burst span::before,.popcorn-burst span::after { content:""; position:absolute; width:16px; height:16px; border:2px solid #c9922e; border-radius:50%; background:#fff5c9; }
.popcorn-burst span::before { left:-8px; top:4px; }.popcorn-burst span::after { right:-8px; top:2px; }
@keyframes burst-popcorn { 0% { opacity:0; transform:translate(-50%,-50%) scale(.15) rotate(0); } 14% { opacity:1; } 70% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--pop-x)),calc(-50% + var(--pop-y))) scale(var(--pop-scale)) rotate(var(--pop-rotation)); } }
.card-inside, .card-cover { position: absolute; inset: 0; border-radius: 3px 12px 12px 3px; }
.card-inside { display: grid; grid-template-columns: .82fr 1.28fr; overflow: hidden; background: var(--cream); box-shadow: inset 10px 0 25px rgba(50,38,22,.07), inset 0 0 50px rgba(190,160,100,.08); }
.book-page { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; background:var(--cream); transform-origin:left center; backface-visibility:hidden; }
.book-page[hidden] { display:none; }
.book-page::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(61,48,31,.12); box-shadow:-8px 0 18px rgba(58,43,25,.07),8px 0 18px rgba(58,43,25,.05); }
.book-page.turning-forward { animation:turn-forward .46s ease-in forwards; z-index:2; }
.book-page.turning-back { animation:turn-back .46s ease-in forwards; z-index:2; }
.book-page.arriving-forward { animation:arrive-forward .55s ease-out; }
.book-page.arriving-back { animation:arrive-back .55s ease-out; }
@keyframes turn-forward { to { opacity:0; transform:perspective(1400px) rotateY(-26deg) translateX(-4%); } }
@keyframes turn-back { to { opacity:0; transform:perspective(1400px) rotateY(26deg) translateX(4%); } }
@keyframes arrive-forward { from { opacity:0; transform:perspective(1400px) rotateY(24deg) translateX(4%); } }
@keyframes arrive-back { from { opacity:0; transform:perspective(1400px) rotateY(-24deg) translateX(-4%); } }
.page-illustration { position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.page-copy { display:flex; min-width:0; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(2rem,5vw,5rem); }
.page-number { margin:0 0 1.4rem; color:#b4a385; font-size:.68rem; font-weight:600; letter-spacing:.18em; }
.chapter { margin:0 0 .65rem; color:var(--rust); font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.page-copy h2 { max-width:100%; margin:0 0 1rem; font:400 clamp(2.6rem,5.2vw,5.2rem)/.96 "Instrument Serif",serif; letter-spacing:-.025em; }
.page-copy h2 em { color:var(--rust); font-weight:400; }
.page-copy > p:not(.page-number):not(.chapter) { max-width:26rem; margin:0; color:#68655f; font-size:clamp(.84rem,1.25vw,1rem); line-height:1.65; }
.page-next,.page-back { margin-top:1.5rem; border:0; border-bottom:1px solid currentColor; padding:.25rem 0; color:var(--navy); background:transparent; cursor:pointer; font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.page-next:hover,.page-back:hover { color:var(--rust); }
.page-actions { display:flex; align-items:center; gap:1.6rem; }
.popcorn-scene { background:#efdfbf; }
.popcorn-tub { position:absolute; left:50%; top:52%; z-index:1; width:clamp(120px,18vw,210px); height:clamp(135px,20vw,235px); border-radius:8px 8px 30px 30px; background:#fff9e8; transform:translate(-50%,-30%) rotate(-3deg); box-shadow:0 16px 25px rgba(63,42,22,.16); overflow:hidden; }
.tub-stripe { position:absolute; top:0; bottom:0; width:17%; background:#c74e3d; transform:skewX(-5deg); }
.tub-stripe:nth-child(1){left:5%}.tub-stripe:nth-child(2){left:41%}.tub-stripe:nth-child(3){right:5%}
.popcorn-piece { position:absolute; z-index:2; width:clamp(55px,8vw,92px); aspect-ratio:1; border-radius:48% 52% 45% 55%; background:#fff8d9; border:3px solid #d7a949; box-shadow:inset -5px -7px rgba(227,177,65,.18),0 7px 10px rgba(65,45,24,.12); }
.popcorn-piece::before,.popcorn-piece::after { content:""; position:absolute; width:68%; height:68%; border-radius:50%; background:inherit; border:inherit; }
.popcorn-piece::before{left:-27%;top:18%}.popcorn-piece::after{right:-27%;top:14%}
.piece-one{left:25%;top:21%;transform:rotate(-12deg)}.piece-two{left:44%;top:15%;transform:rotate(9deg)}.piece-three{right:22%;top:25%;transform:rotate(20deg)}.piece-four{left:38%;top:31%;transform:scale(.85)}
.face-eye { position:absolute; z-index:3; top:50%; width:10px; height:13px; border-radius:50%; background:#392d23; }.eye-left{left:35%}.eye-right{right:35%}
.face-smile { position:absolute; z-index:3; left:50%; top:59%; width:28px; height:14px; border-bottom:4px solid #392d23; border-radius:0 0 50% 50%; transform:translateX(-50%); }
.cartoon-arm,.cartoon-leg { position:absolute; z-index:0; width:54px; height:4px; border-radius:4px; background:#392d23; transform-origin:left center; }.arm-left{left:18%;top:62%;transform:rotate(24deg)}.arm-right{right:10%;top:58%;transform:rotate(-25deg)}.leg-left{left:38%;bottom:15%;transform:rotate(112deg)}.leg-right{left:55%;bottom:15%;transform:rotate(68deg)}
.page-classic { background:#f8f0df; }
.classic-copy { background:#fff9ec; }
.car-scene { flex-direction:column; background:#cfdfdd; }
.car-scene svg { width:90%; overflow:visible; filter:drop-shadow(0 15px 8px rgba(32,48,51,.15)); }
.page-classic.is-current .car-scene svg { animation:classic-drive-in 1.45s cubic-bezier(.2,.75,.24,1) both,classic-cruise 2.3s ease-in-out 1.45s infinite alternate; }
.page-classic.is-current .road-line { animation:road-roll .55s linear 12; }
@keyframes classic-drive-in { 0% { opacity:0; transform:translateX(145%) translateY(-4px) rotate(2deg); } 62% { opacity:1; transform:translateX(-10%) translateY(2px) rotate(-1deg); } 80% { transform:translateX(5%) translateY(-2px) rotate(.5deg); } 100% { opacity:1; transform:translateX(0) translateY(0) rotate(0); } }
@keyframes classic-cruise { from { transform:translateX(-9px) translateY(1px) rotate(-.25deg); } to { transform:translateX(9px) translateY(-4px) rotate(.25deg); } }
@keyframes road-roll { from { transform:translateX(55px); } to { transform:translateX(-55px); } }
.car-shadow{fill:rgba(29,46,49,.18)}.car-main-body{fill:#8f2630;stroke:#471d24;stroke-width:5}.car-cabin{fill:#9f2d35;stroke:#471d24;stroke-width:5}.car-roof{fill:none;stroke:#d8b16a;stroke-width:6;stroke-linecap:round}.car-window{fill:#92b5b7;stroke:#471d24;stroke-width:4}.long-hood{fill:#a93239;stroke:#471d24;stroke-width:5}.rear-fender,.front-fender{fill:#b13a41;stroke:#471d24;stroke-width:6}.running-board{fill:#382d2b;stroke:#171312;stroke-width:4}.door-line{fill:none;stroke:#5f2027;stroke-width:4;stroke-linecap:round}.hood-lines{fill:none;stroke:#682329;stroke-width:3}.chrome-spear{fill:none;stroke:#e6c27b;stroke-width:5;stroke-linecap:round}.tire{fill:#242526;stroke:#111;stroke-width:4}.whitewall{fill:#f6ecd5;stroke:#242526;stroke-width:5}.hub{fill:#c89a4c;stroke:#705022;stroke-width:4}.tall-grille{fill:#d8c39a;stroke:#4f4035;stroke-width:5}.grille-lines{fill:none;stroke:#6c5a48;stroke-width:3;stroke-linecap:round}.headlight{fill:#ffe6a0;stroke:#59442f;stroke-width:5}.headlight-stem{fill:none;stroke:#554035;stroke-width:6}.bumper{fill:none;stroke:#e0c687;stroke-width:9;stroke-linecap:round}
.road-line { width:62%; height:5px; margin-top:-4%; border-radius:3px; background:#fff5d6; box-shadow:120px 0 #fff5d6,-120px 0 #fff5d6; }
.page-fixit { background:#f7efdf; }
.fixit-scene { background:#d7c397; }
.pegboard { position:absolute; inset:0; opacity:.42; background-image:radial-gradient(#765f3d 1.5px,transparent 1.5px); background-size:18px 18px; }
.toolbox-cartoon { position:relative; width:min(84%,390px); overflow:visible; filter:drop-shadow(0 15px 10px rgba(54,40,25,.15)); }
.page-fixit.is-current .toolbox-cartoon { animation:toolbox-hop .9s cubic-bezier(.2,.78,.25,1.18) both,toolbox-idle 1.8s ease-in-out .9s infinite alternate; }
.page-fixit.is-current .wrench { transform-box:fill-box; transform-origin:center; animation:wrench-turn .55s ease-in-out .75s 3 alternate; }
.page-fixit.is-current .spark { animation:tool-spark .65s ease-in-out .9s 3 alternate; }
@keyframes toolbox-hop { 0% { opacity:0; transform:translateY(75%) scale(.78) rotate(-5deg); } 68% { opacity:1; transform:translateY(-6%) scale(1.03) rotate(2deg); } 100% { opacity:1; transform:translateY(0) scale(1) rotate(0); } }
@keyframes toolbox-idle { from { transform:translateY(0); } to { transform:translateY(-3px); } }
@keyframes wrench-turn { from { transform:rotate(0); } to { transform:rotate(12deg); } }
@keyframes tool-spark { from { opacity:.25; transform:scale(.65) rotate(-10deg); } to { opacity:1; transform:scale(1.15) rotate(8deg); } }
.toolbox-handle { fill:none; stroke:#313b3c; stroke-width:17; stroke-linecap:round; }.toolbox-lid{fill:#d0543d;stroke:#68382f;stroke-width:6}.toolbox-body{fill:#bd4635;stroke:#68382f;stroke-width:6}.toolbox-line{fill:none;stroke:#f0c56a;stroke-width:8}.tool-eye{fill:#342b25}.tool-smile{fill:none;stroke:#342b25;stroke-width:7;stroke-linecap:round}.wrench{fill:#8ca0a0;stroke:#3f5050;stroke-width:6;stroke-linejoin:round}.screw{fill:#e0ae4b;stroke:#6f5127;stroke-width:5}
.spark { position:absolute; color:#fff0b4; font-size:2rem; text-shadow:0 3px 5px rgba(64,45,22,.16); }.spark-one{left:13%;top:19%;transform:rotate(-8deg)}.spark-two{right:12%;bottom:20%;font-size:1.35rem}
.fixit-copy strong { color:var(--rust); font-weight:600; }
.fixit-copy h2 { font-size:clamp(2.25rem,4vw,3.8rem); line-height:.9; }
.page-papa { background:#f8eee1; }
.papa-scene { background:#d9b8a4; }
.papa-scene::before { content:""; position:absolute; inset:0; opacity:.28; background-image:radial-gradient(#fff1e4 1.5px,transparent 1.5px); background-size:18px 18px; }
.papa-photo-frame { position:relative; width:min(73%,330px); padding:.65rem .65rem 2.2rem; background:#fffaf1; box-shadow:0 18px 30px rgba(61,38,30,.22); transform:rotate(-3deg); }
.papa-photo-frame img { display:block; width:100%; aspect-ratio:1; object-fit:cover; object-position:center; filter:saturate(.92) contrast(1.03); }
.papa-photo-frame p { position:absolute; left:0; right:0; bottom:.5rem; margin:0; color:#85544e; font:italic 1.05rem "Instrument Serif",serif; text-align:center; }
.papa-copy { background:#fff8ee; }
.papa-copy strong { color:var(--rust); font-weight:600; }
.papa-copy h2 { font-size:clamp(2.2rem,4.4vw,4.2rem); }
.papa-heart { position:absolute; color:#fff2e1; font:2.5rem "Instrument Serif",serif; text-shadow:0 4px 8px rgba(82,45,38,.12); }.heart-one{left:8%;top:10%;transform:rotate(-10deg)}.heart-two{right:8%;bottom:12%;font-size:1.7rem;transform:rotate(12deg)}
.page-papa.is-current .papa-photo-frame { animation:papa-photo-in .9s cubic-bezier(.2,.78,.25,1.12) both,papa-photo-float 2.2s ease-in-out .9s infinite alternate; }
.page-papa.is-current .papa-heart { animation:papa-heartbeat .8s ease-in-out .65s 3 alternate; }
@keyframes papa-photo-in { from { opacity:0; transform:translateY(45px) rotate(-9deg) scale(.82); } to { opacity:1; transform:translateY(0) rotate(-3deg) scale(1); } }
@keyframes papa-photo-float { from { transform:translateY(0) rotate(-3deg); } to { transform:translateY(-4px) rotate(-2deg); } }
@keyframes papa-heartbeat { from { opacity:.35; transform:scale(.7) rotate(-8deg); } to { opacity:1; transform:scale(1.12) rotate(5deg); } }
.page-hero { background:#fff6df; }
.hero-copy { background:#fff9eb; }
.hero-copy { padding:clamp(1.8rem,3.6vw,3.6rem); }
.hero-copy h2 { font-size:clamp(2.4rem,4.1vw,4.1rem); line-height:.94; }
.hero-copy strong { color:var(--rust); font-weight:600; }
.hero-scene { background:#5b89a3; isolation:isolate; }
.hero-rays { position:absolute; inset:-40%; z-index:-2; background:repeating-conic-gradient(from 4deg,#6e9db6 0 12deg,#4d7d98 12deg 24deg); animation:hero-glow 12s linear infinite; }
.hero-cape { position:absolute; left:50%; top:48%; width:min(61%,250px); height:min(64%,310px); border:5px solid #6f252c; border-radius:48% 52% 20% 20% / 10% 10% 90% 90%; background:#b83942; box-shadow:0 18px 24px rgba(28,46,55,.22); transform:translate(-50%,-50%) rotate(-5deg); clip-path:polygon(15% 0,85% 0,100% 100%,72% 87%,51% 100%,27% 87%,0 100%); }
.hero-cape::before,.hero-cape::after { content:""; position:absolute; top:3%; width:49%; height:90%; border-radius:50%; opacity:.22; background:linear-gradient(90deg,transparent,#ffcf9e,transparent); }.hero-cape::before{left:3%;transform:skewX(-8deg)}.hero-cape::after{right:3%;transform:skewX(8deg)}
.hero-emblem { display:grid; place-items:center; width:min(42%,170px); aspect-ratio:1; border:8px solid #ffe29b; border-radius:22% 22% 55% 55%; color:#fff3bc; background:var(--navy); box-shadow:0 10px 20px rgba(29,44,54,.25),inset 0 0 0 5px #d5a742; transform:rotate(3deg); }
.hero-emblem span { font:400 clamp(4rem,9vw,8rem)/1 "Instrument Serif",serif; text-shadow:3px 4px #a43a3d; }
.hero-star { position:absolute; color:#ffe7a6; font-size:2rem; text-shadow:0 3px 5px rgba(28,46,55,.2); }.star-one{left:12%;top:15%;transform:rotate(-8deg)}.star-two{right:12%;top:24%;font-size:1.35rem}.star-three{right:17%;bottom:13%;font-size:2.5rem;transform:rotate(9deg)}
@keyframes hero-glow { to { transform:rotate(360deg); } }
.page-nutrition { grid-template-columns:1fr 1fr; background:#ece8df; }
.nutrition-scene { align-items:flex-start; overflow:hidden; background:#d7cbb4; padding:clamp(.4rem,.8vw,.75rem); }
.nutrition-label { width:min(98%,550px); max-height:99%; padding:clamp(.75rem,1.4vw,1.15rem); color:#080808; background:#fff; border:4px solid #080808; box-shadow:8px 10px 0 rgba(65,47,31,.15); font-family:Arial,Helvetica,sans-serif; transform:rotate(-.35deg); }
.nutrition-label p,.nutrition-label dl { margin:0; }
.label-pop { border-bottom:2px solid #111; font-size:clamp(2.5rem,5vw,4.7rem); font-weight:900; line-height:.84; letter-spacing:-.06em; }
.label-title { border-bottom:2px solid #111; font-size:clamp(1.5rem,3vw,2.65rem); font-weight:900; line-height:1.06; letter-spacing:-.045em; }
.label-serving { display:flex; justify-content:space-between; gap:.5rem; padding:.5rem 0 .35rem; font-size:clamp(.75rem,1.05vw,1rem); }.label-serving strong{text-align:right}
.label-thick { height:10px; background:#080808; }.label-heavy{height:5px;background:#080808}
.amount { padding-top:.3rem; font-size:clamp(.68rem,.9vw,.85rem); font-weight:700; }
.family { font-size:clamp(1.35rem,2.5vw,2.25rem); font-weight:900; line-height:1; letter-spacing:-.04em; }
.daily { padding:.2rem 0; text-align:right; font-size:clamp(.72rem,.95vw,.9rem); font-weight:800; }
.facts-list div { display:flex; justify-content:space-between; gap:.4rem; border-top:1px solid #555; padding:.15rem 0; color:#080808; font-size:clamp(.72rem,.95vw,.9rem); font-weight:800; line-height:1.05; }.facts-list dt,.facts-list dd{margin:0}.facts-list dd{text-align:right}.highlight-fact{color:#080808}
.small-thick { height:7px; margin-top:.12rem; }.final-facts div:first-child{border-top:0}.foot-thick{height:6px;margin-top:.1rem}
.label-foot { padding-top:.25rem; font-size:clamp(.58rem,.7vw,.66rem); line-height:1.15; }
.nutrition-copy { padding:clamp(1.15rem,2.2vw,2.2rem); background:#fff9eb; }
.nutrition-copy h2 { font-size:clamp(1.9rem,3.2vw,3.1rem); }
.page-letter { grid-template-columns:.65fr 1.35fr; background:#eee1c8; }
.letter-seal { display:grid; place-items:center; }.letter-seal span { display:grid; place-items:center; width:clamp(120px,18vw,210px); aspect-ratio:1; border-radius:50%; color:#fff6e5; background:var(--rust); font:3.8rem "Instrument Serif",serif; box-shadow:0 13px 25px rgba(68,43,24,.18); transform:rotate(-5deg); }
.final-back { margin-top:.4rem; }
.page-letter .message { overflow-y:auto; }
.voice-message { width:min(100%,310px); margin:.25rem 0 .35rem; padding:.55rem .65rem .6rem; border:1px solid rgba(23,50,77,.16); border-radius:10px; background:rgba(255,255,255,.48); }
.voice-play { display:flex; width:100%; align-items:center; gap:.65rem; border:0; padding:0; color:var(--navy); background:transparent; text-align:left; cursor:pointer; }
.voice-icon { display:grid; flex:0 0 2.15rem; width:2.15rem; height:2.15rem; place-items:center; border-radius:50%; color:#fff8e9; background:var(--rust); font-size:.7rem; box-shadow:0 5px 10px rgba(84,51,35,.16); }
.voice-play small { display:block; color:#90735b; font-size:.52rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.voice-play strong { display:block; margin-top:.1rem; font:1rem "Instrument Serif",serif; font-weight:400; }
.voice-track { display:block; height:3px; margin:.45rem 0 0 2.8rem; overflow:hidden; border-radius:3px; background:rgba(23,50,77,.14); }.voice-track i{display:block;width:0;height:100%;border-radius:inherit;background:var(--rust);transition:width .1s linear}
.keepsake { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #efe1c7; border-right: 1px solid rgba(55,43,28,.12); }
.sunburst { display: grid; place-items: center; width: min(60%, 220px); aspect-ratio: 1; color: #fff8e8; background: var(--rust); clip-path: polygon(50% 0,60% 12%,74% 5%,78% 20%,94% 20%,88% 35%,100% 50%,88% 62%,95% 79%,78% 80%,73% 96%,59% 88%,50% 100%,40% 88%,26% 96%,21% 80%,5% 79%,12% 63%,0 50%,12% 37%,5% 20%,22% 20%,27% 5%,41% 12%); transform: rotate(-5deg); }
.sunburst span { font: 400 clamp(1.55rem,3.2vw,2.8rem)/.82 "Instrument Serif",serif; letter-spacing: .02em; text-align: center; transform: rotate(5deg); }
.keepsake p { margin: 1.5rem 0 0; color: #8c6d43; font: italic 1.1rem "Instrument Serif",serif; transform: rotate(-2deg); }
.message { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem,5vw,4.8rem); }
.salutation { margin: 0 0 .75rem; color: #a44732; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.message h2 { margin: 0 0 1.2rem; color: var(--ink); font: 400 clamp(2.15rem,4.5vw,4.2rem)/.94 "Instrument Serif",serif; letter-spacing: -.025em; }
.message h2 em { color: var(--rust); font-weight: 400; }
.message > p:not(.salutation):not(.signature):not(.love) { max-width: 34rem; margin: 0 0 .75rem; color: #60656a; font-size: clamp(.84rem,1.25vw,1.03rem); line-height: 1.65; }
.love { margin: .4rem 0 0; color: #75716b; font-size: .84rem; }
.signature { margin: 0; color: var(--navy); font: italic 2rem "Instrument Serif",serif; }
.card-cover { appearance: none; border: 0; padding: 0; color: #fff8eb; cursor: pointer; transform-origin: left center; transform: rotateY(0); transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.65,.02,.2,1), box-shadow .3s ease; background: linear-gradient(120deg,rgba(255,255,255,.05),transparent 35%), radial-gradient(circle at 50% 38%,#27547a,var(--navy) 62%,var(--navy-deep)); box-shadow: inset 7px 0 12px rgba(0,0,0,.28), inset -1px 0 rgba(255,255,255,.12); z-index: 2; backface-visibility: visible; }
.cover-collage { position:absolute; inset:0; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(2,1fr); gap:4px; padding:4px; overflow:hidden; border-radius:inherit; backface-visibility:hidden; }
.cover-collage::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(8,24,40,.38) 0%,rgba(8,24,40,.62) 53%,rgba(7,18,31,.72) 100%); box-shadow:inset 0 0 90px rgba(4,12,21,.42); }
.cover-collage img { width:100%; height:100%; min-width:0; object-fit:cover; filter:saturate(.82) contrast(1.05); }
.cover-collage img:nth-child(1){object-position:63% center}.cover-collage img:nth-child(2){object-position:center}.cover-collage img:nth-child(3){object-position:center 68%}.cover-collage img:nth-child(4){object-position:55% center}.cover-collage img:nth-child(5){object-position:center 62%}.cover-collage img:nth-child(6){object-position:center 35%}.cover-collage img:nth-child(7){object-position:center 30%}.cover-collage img:nth-child(8){object-position:center 48%}.cover-collage img:nth-child(9){object-position:center 50%}.cover-collage img:nth-child(10){object-position:center 47%}
.card-cover::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,229,174,.22); border-radius: inherit; pointer-events: none; }
.stitching { position: absolute; inset: 14px; z-index:3; border: 1px dashed rgba(255,232,185,.48); border-radius: 2px 8px 8px 2px; }
.cover-art { position: absolute; inset: 0; z-index:2; display: flex; flex-direction: column; align-items: center; justify-content: center; backface-visibility: hidden; text-shadow:0 3px 14px rgba(0,0,0,.82); }
.small-type { color: #d8c390; font-size: .64rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.star { margin: .8rem 0 .2rem; color: var(--gold); font-size: 1.9rem; }
.title { font: 400 clamp(3.8rem,8vw,7rem)/.78 "Instrument Serif",serif; letter-spacing: 0em; text-align: center; }
.title em { color: #e6b954; font-weight: 400; }
.rule { width: 3.5rem; height: 1px; margin: 1.5rem 0 .75rem; background: var(--gold); }
.dad { font: italic clamp(1.5rem,3vw,2.1rem) "Instrument Serif",serif; }
.open-prompt { position: absolute; right: 1.7rem; bottom: 1.45rem; z-index:4; display: flex; align-items: center; gap: .55rem; color: rgba(255,248,235,.88); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-shadow:0 2px 8px rgba(0,0,0,.9); }
.open-prompt b { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid rgba(255,248,235,.35); border-radius: 50%; transition: transform .2s ease; }
.card-cover:hover .open-prompt b { transform: translate(2px,-2px); }
.card-cover:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.card.is-open .card-cover { transform: rotateY(-162deg); box-shadow: inset 12px 0 20px rgba(0,0,0,.34),12px 18px 30px rgba(23,31,39,.13); }
.card-controls { display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:1rem; }
.card-controls[hidden] { display:none; }
.card-controls button { border:0; border-bottom:1px solid #9a978f; padding:.15rem 0; color:#62676a; background:transparent; cursor:pointer; font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; }
.card-controls button:hover { color:var(--navy); border-color:var(--navy); }
.footer-note { margin: .8rem 0 0; color: #787b7c; font: italic .92rem "Instrument Serif",serif; }
.copyright { margin:.2rem 0 0; color:#959696; font-size:.58rem; letter-spacing:.12em; }
.song-card { width:min(90vw,430px); margin:0 0 1rem; padding:.7rem; border:1px solid rgba(23,50,77,.14); border-radius:14px; background:rgba(255,250,240,.72); box-shadow:0 10px 24px rgba(37,43,46,.08); backdrop-filter:blur(8px); }
.song-label { display:flex; align-items:center; gap:.65rem; padding:.1rem .25rem .65rem; color:var(--navy); }.song-label>span{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;color:#fff7e6;background:var(--rust);font-size:1.05rem}.song-label p{margin:0;font:1rem "Instrument Serif",serif}.song-label small{display:block;margin-bottom:.08rem;color:#8a8177;font:.53rem "DM Sans",sans-serif;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.song-card iframe{display:block;height:0;border-radius:10px;background:#e7ded0}.song-card.is-playing iframe{height:175px}
.floating-doodles span { position: fixed; color: rgba(23,50,77,.13); font-size: clamp(2rem,4vw,4rem); z-index: -1; animation: float 8s ease-in-out infinite alternate; }
.floating-doodles span:nth-child(1) { left: 7%; top: 15%; }.floating-doodles span:nth-child(2) { right: 8%; top: 16%; animation-delay: -2s; }.floating-doodles span:nth-child(3) { left: 10%; bottom: 12%; animation-delay: -4s; }.floating-doodles span:nth-child(4) { right: 6%; bottom: 14%; animation-delay: -6s; }
@keyframes float { to { transform: translateY(-13px) rotate(8deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width:760px) { .page-shell { justify-content:flex-start; padding-top:1.8rem; } .card-stage { width:min(88vw,480px); height:min(132vw,650px); min-height:480px; max-height:76vh; } .card-inside { grid-template-columns:1fr; } .book-page { grid-template-columns:1fr; grid-template-rows:42% 58%; } .book-page::after { left:0; right:0; top:42%; bottom:auto; width:auto; height:1px; } .page-copy { padding:1.35rem 1.7rem; } .page-copy h2,.fixit-copy h2 { font-size:clamp(2.05rem,9.3vw,3.15rem); margin-bottom:.55rem; } .page-number { display:none; } .chapter { margin-bottom:.35rem; } .page-next,.page-back { margin-top:.7rem; } .popcorn-tub { width:96px; height:112px; top:42%; } .popcorn-piece { width:47px; } .piece-one{left:25%;top:12%}.piece-two{left:43%;top:7%}.piece-three{right:22%;top:14%}.piece-four{left:38%;top:23%} .face-eye{top:47%;width:7px;height:10px}.face-smile{top:57%;width:22px;height:11px} .arm-left{left:18%;top:61%}.arm-right{right:12%;top:57%}.leg-left,.leg-right{bottom:8%} .page-classic .car-scene,.page-hero .hero-scene { grid-row:1; } .classic-copy,.hero-copy { grid-row:2; } .car-scene svg { width:77%; } .road-line { margin-top:-8%; } .toolbox-cartoon{width:65%;} .hero-cape{width:42%;height:72%;}.hero-emblem{width:28%;border-width:5px}.hero-emblem span{font-size:3.2rem} .page-letter { display:block; } .page-letter[hidden] { display:none; } .letter-seal { display:none; } .message { height:100%; padding:clamp(1.8rem,8vw,3.2rem); } .message h2 { font-size:clamp(2.1rem,9.5vw,3.5rem); } .message > p:not(.salutation):not(.signature):not(.love) { font-size:clamp(.8rem,3.4vw,.95rem); } .title { font-size:clamp(3.7rem,19vw,6rem); } .card.is-open .card-cover { transform:rotateY(-174deg); } .eyebrow { margin-bottom:.7rem; } }
@media (max-width:760px) { .page-nutrition { grid-template-rows:76% 24%; } .page-nutrition::after { top:76%; } .nutrition-scene { padding:.2rem; } .nutrition-label { width:min(94%,360px); max-height:none; padding:.45rem .58rem; } .nutrition-label .label-serving{padding:.3rem 0 .2rem}.nutrition-label .label-thick{height:7px}.nutrition-label .label-heavy{height:4px}.nutrition-label .facts-list div{padding:.07rem 0}.nutrition-label .small-thick{height:5px}.nutrition-label .foot-thick{height:4px}.nutrition-label .label-foot{padding-top:.15rem}.nutrition-copy { padding:.35rem 1.2rem; } .nutrition-copy h2 { font-size:clamp(1.45rem,6.6vw,2.05rem); line-height:.98; margin-bottom:.1rem; } .nutrition-copy .chapter { display:none; } .nutrition-copy > p:not(.page-number):not(.chapter) { display:none; } .nutrition-copy .page-next,.nutrition-copy .page-back { margin-top:.2rem; } }
@media (min-width:761px) and (max-height:820px) { .page-shell{padding-top:1rem}.song-card{margin-bottom:.7rem}.card-stage{height:min(51vw,540px);max-height:none;min-height:420px}.page-copy{padding:clamp(1.5rem,3vw,3rem)}.page-copy h2{font-size:clamp(2.3rem,3.9vw,3.9rem);line-height:.95;margin-bottom:.7rem}.hero-copy{padding:clamp(1.4rem,2.8vw,2.8rem)}.hero-copy h2{font-size:clamp(2.15rem,3.6vw,3.6rem);line-height:.95}.page-number{margin-bottom:.8rem}.page-next,.page-back{margin-top:.9rem}.message{padding:clamp(1.6rem,3.5vw,3.5rem)}.message h2{font-size:clamp(2.1rem,3.6vw,3.6rem)}.nutrition-scene{padding:.5rem}.nutrition-label{width:min(96%,470px);max-height:calc(100% - 1rem);padding:.48rem .7rem;border-width:3px}.nutrition-label .label-pop{font-size:2.65rem}.nutrition-label .label-title{font-size:1.55rem}.nutrition-label .label-serving{padding:.22rem 0 .15rem;font-size:.75rem}.nutrition-label .label-thick{height:6px}.nutrition-label .label-heavy{height:3px}.nutrition-label .amount{padding-top:.18rem;font-size:.66rem}.nutrition-label .family{font-size:1.3rem}.nutrition-label .daily{padding:.12rem 0;font-size:.68rem}.nutrition-label .facts-list div{padding:.06rem 0;font-size:.68rem}.nutrition-label .small-thick{height:4px}.nutrition-label .foot-thick{height:3px}.nutrition-label .label-foot{padding-top:.12rem;font-size:.52rem}.nutrition-copy{padding:clamp(1.5rem,3vw,2.6rem)}.nutrition-copy h2{font-size:clamp(2.2rem,3.8vw,3.5rem)} }
@media (max-width:760px) { .cover-collage { display:none; } .card-cover { background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 35%),radial-gradient(circle at 50% 38%,#27547a,var(--navy) 62%,var(--navy-deep)); } }
@media (max-width:760px) { .page-copy { width:100%; padding:1.45rem clamp(2rem,8vw,2.7rem); overflow:hidden; } .page-copy h2,.fixit-copy h2,.papa-copy h2,.hero-copy h2 { max-width:100%; font-size:clamp(1.9rem,8.2vw,2.85rem); line-height:1.04; letter-spacing:-.015em; margin-bottom:.75rem; } .message h2 { line-height:1.04; letter-spacing:-.015em; } .arm-left,.arm-right { width:68px; } .arm-left { left:calc(50% - 108px); right:auto; top:57%; transform-origin:right center; transform:rotate(25deg); } .arm-right { left:calc(50% + 38px); right:auto; top:57%; transform-origin:left center; transform:rotate(-25deg); } .leg-left,.leg-right { width:58px; top:66%; bottom:auto; transform-origin:left center; } .leg-left { left:calc(50% - 25px); transform:rotate(108deg); } .leg-right { left:calc(50% + 18px); transform:rotate(72deg); } }
@media (max-width:760px) { .card-stage { perspective:none; } .card { transform-style:flat; } .card-inside { z-index:1; transform:translateZ(0); -webkit-transform:translateZ(0); } .book-page { -webkit-backface-visibility:visible; backface-visibility:visible; transform:translateZ(0); -webkit-transform:translateZ(0); } .book-page.turning-forward{animation:mobile-out-left .38s ease-in forwards}.book-page.turning-back{animation:mobile-out-right .38s ease-in forwards}.book-page.arriving-forward{animation:mobile-in-right .48s ease-out}.book-page.arriving-back{animation:mobile-in-left .48s ease-out}.card-cover { transform-style:flat; -webkit-backface-visibility:hidden; backface-visibility:hidden; transition:transform .72s cubic-bezier(.65,.02,.2,1),opacity .28s ease .42s; } .card.is-open .card-cover { transform:translateX(-104%) rotate(-2deg); opacity:0; pointer-events:none; } @keyframes mobile-out-left{to{opacity:0;transform:translateX(-8%)}}@keyframes mobile-out-right{to{opacity:0;transform:translateX(8%)}}@keyframes mobile-in-right{from{opacity:0;transform:translateX(8%)}to{opacity:1;transform:translateX(0)}}@keyframes mobile-in-left{from{opacity:0;transform:translateX(-8%)}to{opacity:1;transform:translateX(0)}} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }