/* ============================================================
   Sofia Navarrete Books — SCRAPBOOK edition
   Layered paper · washi tape · polaroids · stickers · stitching
   Hand font: Oliver · titles/body: Recoleta
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:'Recoleta';src:url('assets/fonts/Recoleta-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Recoleta';src:url('assets/fonts/Recoleta-Medium.ttf') format('truetype');font-weight:500;font-display:swap;}
@font-face{font-family:'Recoleta';src:url('assets/fonts/Recoleta-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap;}
@font-face{font-family:'Recoleta';src:url('assets/fonts/Recoleta-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'Oliver';src:url('assets/fonts/Oliver-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap');

:root{
  --serif:'Recoleta','Newsreader',Georgia,serif;
  --hand:'Oliver','Newsreader',cursive;       /* the messy handwriting */
  --badge:#2A2746;
  --maxw:480px;
  --spring:cubic-bezier(.34,1.34,.56,1);
  --quint:cubic-bezier(.22,1,.36,1);
}

/* ===== THEME A — Berry Picnic (kraft cream · raspberry · periwinkle · sage) ===== */
:root[data-theme="a"]{
  --paper:#ECE0C6; --paper-2:#E2D3B2; --grid:rgba(120,95,55,.10);
  --card:#FBF4E2; --card-warm:#F7EBD2; --white:#FCF8EE;
  --ink:#3C3142; --ink-soft:#6E6173; --ink-faint:#A293A0;
  --primary:#C9526A; --primary-deep:#A23A53; --on-primary:#FFF6F0;
  --note:#FEFBF4;
  --peri:#8B83EF; --sage:#8FA06B; --gold:#E0A93F; --coral:#E98A6B;
  --tape:rgba(201,82,106,.16); --tape2:rgba(139,131,239,.18);
  --line:rgba(60,49,66,.16); --rule:rgba(60,49,66,.32);
  --shadow:rgba(74,55,30,.28);
}
/* ===== THEME B — Seaside Postcard (sand · teal · coral · mustard) ===== */
:root[data-theme="b"]{
  --paper:#E7DEC8; --paper-2:#DBD0B5; --grid:rgba(60,90,90,.10);
  --card:#F6F0DF; --card-warm:#F1E7D0; --white:#FBF8EF;
  --ink:#2C3A3E; --ink-soft:#5C6A6C; --ink-faint:#93A09F;
  --primary:#3E8C86; --primary-deep:#2C6864; --on-primary:#F4F6EF;
  --note:#FDFAF1;
  --peri:#8B83EF; --sage:#7FA079; --gold:#E0A93F; --coral:#E98A6B;
  --tape:rgba(62,140,134,.16); --tape2:rgba(233,138,107,.18);
  --line:rgba(44,58,62,.16); --rule:rgba(44,58,62,.30);
  --shadow:rgba(40,70,68,.26);
}
/* ===== THEME C — Cottage Lilac (soft pink paper · periwinkle · rose) ===== */
:root[data-theme="c"]{
  --paper:#F5E9EC; --paper-2:#ECD9E0; --grid:rgba(150,105,130,.09);
  --card:#FCF4F5; --card-warm:#FFFCFB; --white:#FFFDFC;
  --note:#FFFDFC;
  --ink:#3B3350; --ink-soft:#6B6480; --ink-faint:#A99DAE;
  --primary:#7B71E6; --primary-deep:#5A4FC9; --on-primary:#FFFFFF;
  --peri:#8B83EF; --sage:#9AA378; --gold:#E0B259; --coral:#E2A0AE;
  --tape:rgba(123,113,230,.16); --tape2:rgba(226,160,174,.22);
  --line:rgba(59,51,80,.13); --rule:rgba(59,51,80,.28);
  --shadow:rgba(120,80,100,.24);
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--serif);color:var(--ink);background-color:var(--paper);
  min-height:100vh;overflow-x:hidden;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .5s ease;
}
/* fixed, composited background layer (cheap — paints once, no per-scroll repaint) */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--paper);
  background-image:
    radial-gradient(var(--grid) 1.4px, transparent 1.5px),
    radial-gradient(circle at 50% 0%, color-mix(in srgb,var(--card) 55%,transparent), transparent 50%),
    radial-gradient(ellipse 85% 60% at 50% 50%, transparent 58%, color-mix(in srgb,var(--paper-2) 80%,transparent) 100%);
  background-size:22px 22px, 100% 100%, 100% 100%;
  transition:background-color .5s ease;
}
.page{position:relative;max-width:var(--maxw);margin:0 auto;padding:26px 16px 56px;z-index:1;}
section{position:relative;}

/* ============================================================ SCRAPBOOK PRIMITIVES */

/* washi tape */
.tape{position:absolute;z-index:6;width:96px;height:30px;background:var(--tape);
  box-shadow:0 4px 9px -5px var(--shadow);
  -webkit-mask-image:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent);
  mask-image:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent);}
.tape::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.18) 7px 8px);}
.tape.t2{background:var(--tape2);}
.tape.stripe::after{background:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 5px,transparent 5px 11px);}
.tape.dot::after{background:radial-gradient(rgba(255,255,255,.3) 1.6px,transparent 1.8px);background-size:9px 9px;}
.tape.edge{-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 7px),linear-gradient(#000,#000);
  -webkit-mask-composite:source-in;mask-composite:intersect;}

/* polaroid / paper card */
.polaroid{position:relative;background:var(--white);padding:11px 11px 14px;border-radius:3px;
  box-shadow:0 14px 26px -14px var(--shadow),0 2px 0 rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.05);}
.paper{position:relative;background:var(--card);border-radius:5px;
  box-shadow:0 16px 30px -18px var(--shadow);border:1px solid var(--line);}
.stitched{outline:1.6px dashed var(--rule);outline-offset:-7px;}

/* photo corners */
.pcorner{position:absolute;width:20px;height:20px;z-index:4;border:0 solid color-mix(in srgb,var(--ink) 28%,transparent);}
.pcorner.tl{top:5px;left:5px;border-top-width:7px;border-left-width:7px;border-top-left-radius:2px;}
.pcorner.tr{top:5px;right:5px;border-top-width:7px;border-right-width:7px;border-top-right-radius:2px;}
.pcorner.bl{bottom:5px;left:5px;border-bottom-width:7px;border-left-width:7px;border-bottom-left-radius:2px;}
.pcorner.br{bottom:5px;right:5px;border-bottom-width:7px;border-right-width:7px;border-bottom-right-radius:2px;}

/* handwritten caption */
.caption{font-family:var(--hand);color:var(--ink);line-height:1.05;}

/* price tag (string sticker) */
.tag{position:relative;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--serif);font-weight:700;color:var(--ink);
  background:var(--card-warm);padding:6px 12px 6px 18px;border:1.4px solid var(--rule);
  border-radius:4px 14px 14px 4px;box-shadow:0 4px 8px -4px var(--shadow);}
.tag::before{content:"";position:absolute;left:7px;top:50%;width:7px;height:7px;border-radius:50%;
  border:1.6px solid var(--rule);transform:translateY(-50%);background:var(--paper);}

/* ---------- doodles ---------- */
.doodle-wrap{position:absolute;z-index:7;pointer-events:none;will-change:transform;}
.doodle{display:block;width:100%;height:100%;overflow:visible;color:var(--peri);}
.doodle.c-primary{color:var(--primary);} .doodle.c-peri{color:var(--peri);}
.doodle.c-sage{color:var(--sage);} .doodle.c-gold{color:var(--gold);}
.doodle.c-coral{color:var(--coral);} .doodle.c-rose{color:var(--coral);}
/* sticker treatment: die-cut white border (shadow only on non-animated to stay cheap) */
.sticker{paint-order:stroke fill;stroke:var(--white);stroke-width:3.4;stroke-linejoin:round;}
/* ink treatment: flat (no filter — keeps animated doodles cheap on mobile) */
.ink{}
.doodle.float{animation:floaty 6s ease-in-out infinite;}
.doodle.float2{animation:floaty 7.4s ease-in-out infinite .5s;}
.doodle.sway{animation:sway 6.5s ease-in-out infinite;transform-origin:50% 8%;}
.doodle.spin{animation:spin 24s linear infinite;}
.doodle.tw{animation:twinkle 3s ease-in-out infinite;}
.doodle.tw2{animation:twinkle 2.3s ease-in-out infinite .5s;}

/* drawn divider */
.divider{display:flex;justify-content:center;margin:16px auto 0;width:190px;}
.divider svg{width:100%;height:22px;color:var(--rule);overflow:visible;}

/* ============================================================ REVEAL (one-shot) */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s var(--quint);}
.reveal[data-anim="pop"]{transform:scale(.85) rotate(-2deg);}
.reveal[data-anim="left"]{transform:translateX(-36px) rotate(-2deg);}
.reveal[data-anim="right"]{transform:translateX(36px) rotate(2deg);}
.reveal[data-anim="tilt"]{transform:translateY(28px) rotate(-6deg) scale(.92);}
.reveal.in{opacity:1;transform:none;}

/* ============================================================ HERO */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:4px;}
.logo-badge{position:relative;width:118px;height:118px;border-radius:50%;background:var(--badge);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 0 0 5px var(--white),0 0 0 6.5px var(--rule),0 16px 28px -16px var(--shadow);
  animation:floaty 6.5s ease-in-out infinite;transition:transform .3s var(--spring);}
.logo-clip{width:100%;height:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--badge);}
.logo-clip img{width:100%;height:100%;object-fit:contain;display:block;}
.logo-badge::before{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--peri) 38%,transparent),transparent 68%);
  opacity:.55;animation:pulse 4.5s ease-in-out infinite;}
.logo-badge.pop{animation:wiggle .6s ease;}
.postmark{position:absolute;top:-4px;right:-6px;width:42px;height:42px;color:var(--primary);opacity:.85;transform:rotate(12deg);}

.brand-name{font-family:var(--serif);font-weight:600;font-size:.82rem;letter-spacing:.16em;color:var(--ink-soft);margin-top:15px;text-transform:uppercase;}
.brand-kicker{font-family:var(--hand);font-size:2rem;line-height:1;color:var(--primary);margin-top:6px;transform:rotate(-3deg);}

/* sticky note bio */
.note{position:relative;margin-top:20px;max-width:20em;padding:16px 18px;background:var(--note);
  border-radius:3px;box-shadow:0 10px 22px -12px var(--shadow);transform:rotate(-1.4deg);border:1px solid var(--line);
  background-image:linear-gradient(var(--line) .8px,transparent .8px);background-size:100% 1.6em;background-position:0 1.1em;}
.note .bio{font-size:1.02rem;color:var(--ink-soft);line-height:1.6;text-wrap:pretty;}
.note .bio b{color:var(--ink);font-weight:600;}
.note .bio .pw{color:var(--primary);font-style:italic;}

/* socials as stamps */
.socials{display:flex;gap:11px;margin-top:22px;}
.soc{position:relative;width:48px;height:48px;display:grid;place-items:center;color:var(--ink);
  background:var(--white);border:1.4px solid var(--rule);
  box-shadow:0 6px 12px -8px var(--shadow);border-radius:7px;
  transition:transform .28s var(--spring),background .25s,color .25s,border-color .25s;}
.soc::before{content:"";position:absolute;inset:4px;border:1.2px dashed var(--line);border-radius:4px;pointer-events:none;}
.soc svg{width:20px;height:20px;}
.soc:hover{transform:translateY(-5px) rotate(-7deg);background:var(--primary);color:var(--on-primary);border-color:var(--primary-deep);}
.soc:active{transform:translateY(0) scale(.92);}

/* ============================================================ BUTTONS */
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;padding:14px 20px;border:none;cursor:pointer;
  font-family:var(--serif);font-weight:600;font-size:1.04rem;
  border-radius:13px;text-decoration:none;text-align:center;overflow:hidden;
  transition:transform .2s var(--spring),box-shadow .2s var(--spring),background .25s;}
.btn-primary{background:var(--primary);color:var(--on-primary);
  box-shadow:0 5px 0 var(--primary-deep),0 16px 24px -14px var(--primary-deep);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--primary-deep),0 22px 30px -14px var(--primary-deep);}
.btn-primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--primary-deep);}
.btn-ghost{background:var(--white);color:var(--ink);border:1.6px solid var(--ink);box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 78%,transparent);}
.btn-ghost:hover{transform:translateY(-3px);box-shadow:0 8px 0 color-mix(in srgb,var(--ink) 78%,transparent);}
.btn-ghost:active{transform:translateY(4px);}
.btn .arrow{transition:transform .25s var(--spring);}
.btn:hover .arrow{transform:translateX(6px);}
.btn-sub{display:block;font-family:var(--hand);font-weight:400;font-size:.82rem;opacity:.92;margin-top:1px;}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .6s ease;}
.btn:hover::before{left:130%;}
.primary-cta{margin-top:30px;}

/* ============================================================ SECTION HEADS */
.sec-head{text-align:center;margin:40px 0 18px;}
.eyebrow{font-family:var(--hand);font-size:1.3rem;color:var(--coral);display:inline-block;transform:rotate(-2deg);margin-bottom:1px;}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:1.62rem;color:var(--ink);line-height:1.1;letter-spacing:-.01em;}
.underline{display:block;margin:7px auto 0;width:118px;height:13px;color:var(--primary);}

/* ============================================================ FEATURED (one integrated sheet) */
.featured{position:relative;margin-top:14px;}
.feat-sheet{position:relative;width:100%;max-width:344px;margin:0 auto;padding:18px 16px 20px;
  background:var(--card);border-radius:8px;box-shadow:0 20px 40px -24px var(--shadow);border:1px solid var(--line);}
.feat-card{position:relative;width:78%;max-width:248px;margin:4px auto 0;transform:rotate(-2deg);transition:transform .4s var(--spring);}
.feat-card:hover{transform:rotate(0) scale(1.02);}
.feat-divide{display:block;width:130px;height:18px;margin:13px auto 2px;color:var(--rule);overflow:visible;}
.feat-cover{position:relative;aspect-ratio:1/1;border-radius:2px;overflow:hidden;background:var(--card);}
.feat-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.feat-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%);
  background-size:250% 250%;animation:shine 6s ease-in-out infinite;}
.feat-cap{text-align:center;padding:9px 6px 3px;}
.feat-cap .big{font-family:var(--hand);font-size:1.4rem;color:var(--ink);line-height:1;}
.feat-flag{position:absolute;top:-13px;left:-7px;z-index:8;font-family:var(--hand);font-size:1rem;
  background:var(--gold);color:#3A2E12;padding:6px 11px;border-radius:5px;transform:rotate(-6deg);
  box-shadow:0 6px 13px -6px var(--shadow);}
.feat-info{margin-top:4px;width:100%;text-align:center;}
.feat-title{font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.18;color:var(--ink);}
.feat-desc{font-size:.96rem;color:var(--ink-soft);margin-top:8px;line-height:1.5;max-width:25em;margin-inline:auto;}
.feat-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;flex-wrap:wrap;}
.feat-row .tag{font-size:1.12rem;padding:7px 13px 7px 20px;}
.feat-row .btn{width:auto;min-height:48px;padding:11px 22px;font-size:.98rem;}

/* ============================================================ SHOP COLLAGE */
.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;margin-top:10px;}
.book{position:relative;display:flex;flex-direction:column;align-items:center;}
.book-link{display:block;width:100%;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;}
.book .polaroid{width:100%;transition:transform .34s var(--spring),box-shadow .34s;}
.book:nth-child(4n+1) .polaroid{transform:rotate(-2.4deg);}
.book:nth-child(4n+2) .polaroid{transform:rotate(1.8deg);}
.book:nth-child(4n+3) .polaroid{transform:rotate(2.2deg);}
.book:nth-child(4n+4) .polaroid{transform:rotate(-1.6deg);}
.book-link:hover .polaroid{transform:rotate(0) translateY(-6px) scale(1.03);box-shadow:0 24px 34px -18px var(--shadow);z-index:5;}
.book-link:active .polaroid{transform:rotate(0) translateY(-2px) scale(.99);}
/* gentle floating of each book item */
.book-float{will-change:transform;animation:bookFloat 5s ease-in-out infinite;}
.book:nth-child(4n+2) .book-float{animation-duration:5.7s;animation-delay:.45s;}
.book:nth-child(4n+3) .book-float{animation-duration:6.3s;animation-delay:.2s;}
.book:nth-child(4n+4) .book-float{animation-duration:5.3s;animation-delay:.75s;}
.book-cover{position:relative;aspect-ratio:1/1;border-radius:2px;overflow:hidden;background:var(--card-warm);}
.book-cover img{width:100%;height:100%;object-fit:contain;display:block;}
.book-cap{font-family:var(--hand);font-size:1.02rem;color:var(--ink);text-align:center;line-height:1.04;padding:8px 2px 0;}
.book-badge{position:absolute;z-index:8;top:-9px;left:-7px;font-family:var(--hand);font-size:.82rem;
  background:var(--primary);color:var(--on-primary);padding:4px 9px;border-radius:5px;transform:rotate(-6deg);
  box-shadow:0 5px 10px -4px var(--shadow);}
.book-badge.alt{background:var(--sage);color:#fff;}
.book-foot{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:7px;padding:0 2px;}
.book .tag{font-size:.96rem;padding:5px 10px 5px 16px;}
.book-hint{font-family:var(--serif);font-weight:600;font-size:.74rem;color:var(--primary);white-space:nowrap;}
.book-link:hover .book-hint{text-decoration:underline;}
.shop-all{margin-top:26px;}

/* ============================================================ TABS (segmented) */
.tabs{position:relative;display:flex;gap:6px;max-width:340px;margin:6px auto 0;padding:6px;
  background:var(--note);border:1.4px solid var(--rule);border-radius:14px;
  box-shadow:0 8px 18px -12px var(--shadow);}
.tab{flex:1;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:46px;padding:8px 6px;border:none;cursor:pointer;background:transparent;
  font-family:var(--serif);font-weight:600;font-size:.96rem;color:var(--ink-soft);
  border-radius:9px;transition:color .25s;}
.tab svg{width:18px;height:18px;}
.tab .tdoodle{position:absolute;top:-16px;right:6px;width:24px;height:24px;color:var(--coral);opacity:0;transform:scale(.5) rotate(-20deg);transition:opacity .3s,transform .3s var(--spring);}
.tab[aria-selected="true"]{color:var(--on-primary);}
.tab[aria-selected="true"] .tdoodle{opacity:1;transform:scale(1) rotate(0);}
.tab-pill{position:absolute;z-index:0;top:6px;bottom:6px;left:0;border-radius:9px;background:var(--primary);
  box-shadow:0 5px 0 var(--primary-deep);will-change:transform;transition:transform .34s var(--spring);}
.tab-panel{display:none;}
.tab-panel.active{display:block;animation:tabIn .5s var(--quint);}
@keyframes tabIn{0%{opacity:0;transform:translateY(14px);}100%{opacity:1;transform:none;}}

/* affiliate (my faves) cards */
.fave-intro{text-align:center;font-size:.94rem;color:var(--ink-soft);max-width:26em;margin:0 auto 16px;line-height:1.5;}
.fave-intro em{font-family:var(--hand);font-style:normal;color:var(--primary);font-size:1.15em;}
.fave-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;}
.fave-ph{position:relative;width:100%;aspect-ratio:1/1;border-radius:2px;overflow:hidden;
  background:var(--card-warm);display:grid;place-items:center;}
.fave-ph img{width:100%;height:100%;object-fit:cover;display:block;}
.fave-ph .ph-doodle{width:42%;height:42%;color:var(--rule);opacity:.6;}
.fave-ph .ph-text{position:absolute;bottom:8px;left:0;right:0;font-family:var(--hand);font-size:.82rem;color:var(--ink-faint);}
.fave-cap{font-family:var(--hand);font-size:1.02rem;color:var(--ink);text-align:center;line-height:1.06;padding:8px 2px 0;}
.fave-sub{font-size:.78rem;color:var(--ink-soft);text-align:center;line-height:1.35;padding:2px 4px 0;}
.disclosure{text-align:center;font-size:.74rem;color:var(--ink-faint);font-style:italic;margin:18px auto 0;max-width:28em;line-height:1.45;}

/* ============================================================ FREEBIE (coupon ticket) */
.freebie{position:relative;margin-top:46px;padding:26px 18px 24px;text-align:center;
  background:var(--white);border-radius:10px;box-shadow:0 18px 34px -22px var(--shadow);overflow:hidden;}
.freebie::before,.freebie::after{content:"";position:absolute;top:0;bottom:0;width:20px;
  background:radial-gradient(circle at 0 11px,transparent 0 6px,var(--white) 6.5px);
  background-size:20px 20px;background-repeat:repeat-y;}
.freebie::before{left:-10px;} .freebie::after{right:-10px;transform:scaleX(-1);}
.freebie .inner{position:relative;z-index:1;border:1.6px dashed var(--primary);border-radius:7px;padding:20px 16px 18px;}
.freebie .gift{display:block;width:48px;height:48px;margin:0 auto 4px;}
.freebie h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--ink);line-height:1.12;}
.freebie .sub{font-size:.95rem;color:var(--ink-soft);margin:9px auto 16px;max-width:23em;line-height:1.5;}
.freebie .sub em{font-family:var(--hand);font-style:normal;color:var(--primary);font-size:1.18em;}
.email-form{display:flex;flex-direction:column;gap:10px;}
.email-form input{width:100%;min-height:52px;padding:14px 18px;border-radius:11px;border:1.5px solid var(--rule);
  background:var(--card);color:var(--ink);font-family:var(--serif);font-size:1rem;transition:border-color .25s,box-shadow .25s;}
.email-form input::placeholder{color:var(--ink-faint);font-style:italic;}
.email-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 20%,transparent);}
.email-note{font-family:var(--hand);font-size:1rem;color:var(--ink-faint);margin-top:12px;}
.form-success{display:none;font-family:var(--hand);font-size:1.7rem;color:var(--primary);padding:12px 0;}
.email-form.done input,.email-form.done button{display:none;}
.email-form.done + .form-success{display:block;animation:popIn .55s var(--spring);}

/* ============================================================ STORY (journal note, no photo) */
.story{position:relative;margin-top:46px;padding:24px 20px 22px;background:var(--note);border-radius:5px;
  box-shadow:0 16px 32px -22px var(--shadow);transform:rotate(.5deg);border:1px solid var(--line);
  background-image:linear-gradient(var(--line) .8px,transparent .8px);background-size:100% 1.9em;background-position:0 2.5em;}
.story .stamp{position:absolute;top:-14px;right:16px;width:52px;height:52px;}
.story-kicker{font-family:var(--hand);font-size:1.6rem;color:var(--primary);}
.story p{font-size:1rem;color:var(--ink-soft);margin-top:7px;line-height:1.9;text-wrap:pretty;}
.story p em{font-family:var(--hand);font-style:normal;color:var(--ink);font-size:1.1em;}
.story .sig{font-family:var(--hand);font-size:1.8rem;color:var(--ink);display:block;margin-top:8px;}

/* ============================================================ FOOTER */
.foot{text-align:center;margin-top:46px;color:var(--ink-faint);}
.foot .mini-logo{width:50px;height:50px;border-radius:50%;background:var(--badge);display:inline-grid;place-items:center;padding:0;overflow:hidden;box-shadow:0 0 0 4px var(--white),0 0 0 5px var(--rule);}
.foot .mini-logo img{width:100%;height:100%;object-fit:contain;}
.foot p{font-family:var(--hand);font-size:1.05rem;margin-top:12px;}
.foot .heart{color:var(--primary);}

/* ============================================================ GAME LAUNCHER */
.game-fab{position:fixed;left:14px;bottom:14px;z-index:60;display:flex;align-items:center;gap:8px;text-decoration:none;}
.game-fab .fab-btn{position:relative;width:54px;height:54px;border-radius:50%;background:var(--primary);color:var(--on-primary);
  display:grid;place-items:center;box-shadow:0 8px 18px -6px var(--primary-deep),0 4px 0 var(--primary-deep);
  animation:fabBob 2.4s ease-in-out infinite;transition:transform .2s var(--spring);}
.game-fab:active .fab-btn{transform:scale(.92) translateY(2px);}
.game-fab .fab-btn svg{width:27px;height:27px;}
.game-fab .fab-btn::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--primary);opacity:.5;animation:fabRing 2.4s ease-out infinite;}
.game-fab .fab-spark{position:absolute;top:-6px;right:-4px;width:16px;height:16px;color:var(--gold);animation:twinkle 2s ease-in-out infinite;}
.game-fab .fab-label{font-family:var(--hand);font-size:1.15rem;color:var(--primary);background:var(--white);
  border:1.4px solid var(--rule);padding:5px 11px;border-radius:11px;box-shadow:0 5px 12px -6px var(--shadow);
  transform:rotate(-3deg);white-space:nowrap;}
@keyframes fabBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
@keyframes fabRing{0%{transform:scale(1);opacity:.5;}100%{transform:scale(1.55);opacity:0;}}

/* ============================================================ THEME SWITCH (unused) */
.theme-switch{position:fixed;left:16px;bottom:16px;z-index:60;font-family:var(--serif);}
.ts-toggle{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--rule);cursor:pointer;
  background:var(--card);display:grid;place-items:center;box-shadow:0 8px 20px -8px var(--shadow);transition:transform .3s var(--spring);}
.ts-toggle:hover{transform:scale(1.08) rotate(12deg);}
.ts-toggle svg{width:24px;height:24px;color:var(--ink);}
.ts-panel{position:absolute;left:0;bottom:64px;background:var(--card);border:1.5px solid var(--rule);
  border-radius:12px;padding:13px;box-shadow:0 18px 36px -14px var(--shadow);display:none;width:206px;}
.theme-switch.open .ts-panel{display:block;animation:popIn .35s var(--spring);}
.ts-panel .lbl{font-family:var(--hand);font-size:1.3rem;color:var(--ink-soft);margin-bottom:9px;padding-left:2px;}
.ts-opt{display:flex;align-items:center;gap:11px;width:100%;padding:9px;border:none;border-radius:9px;cursor:pointer;
  background:transparent;font-family:var(--serif);font-weight:600;font-size:.92rem;color:var(--ink);transition:background .2s;}
.ts-opt:hover{background:color-mix(in srgb,var(--primary) 14%,transparent);}
.ts-opt.active{background:color-mix(in srgb,var(--primary) 22%,transparent);}
.ts-sw{display:flex;flex-shrink:0;}
.ts-sw i{width:16px;height:23px;display:block;border:1px solid rgba(0,0,0,.12);}
.ts-sw i:first-child{border-radius:5px 0 0 5px;} .ts-sw i:last-child{border-radius:0 5px 5px 0;}

/* particles */
.sparkle-particle{position:fixed;pointer-events:none;z-index:80;will-change:transform,opacity;}
.confetti{position:fixed;top:-20px;z-index:90;pointer-events:none;will-change:transform;}

/* ============================================================ KEYFRAMES */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-10px) rotate(-3deg);}}
@keyframes sway{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes twinkle{0%,100%{opacity:.4;transform:scale(.8);}50%{opacity:1;transform:scale(1.14);}}
@keyframes pulse{0%,100%{opacity:.45;transform:scale(1);}50%{opacity:.7;transform:scale(1.08);}}
@keyframes wiggle{0%,100%{transform:rotate(0);}20%{transform:rotate(8deg) scale(1.05);}40%{transform:rotate(-9deg);}60%{transform:rotate(6deg);}80%{transform:rotate(-4deg);}}
@keyframes shine{0%{background-position:200% 0;}55%,100%{background-position:-60% 0;}}
@keyframes popIn{0%{opacity:0;transform:scale(.8);}100%{opacity:1;transform:scale(1);}}
@keyframes bookFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

@media(min-width:560px){
  .page{padding:40px 26px 70px;}
  .logo-badge{width:132px;height:132px;}
  .brand-kicker{font-size:2.3rem;}
  .brand-name{font-size:.95rem;}
  .note .bio{font-size:1.1rem;}
  .sec-head h2{font-size:2rem;}
  .eyebrow{font-size:1.5rem;}
  .feat-title{font-size:1.32rem;}
  .feat-desc{font-size:1.04rem;}
  .book-cap{font-size:1.12rem;}
  .freebie h2{font-size:1.8rem;}
  .story p{font-size:1.08rem;}
  .story-kicker{font-size:1.9rem;}
  .btn{font-size:1.12rem;min-height:58px;}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;}.reveal{opacity:1!important;transform:none!important;}.ink{filter:none!important;}.tab-pill{transition:none;}}