/* Marbles & Ink — site styles, FINAL look ("Hand-Inked Toy Label"). Self-hosted fonts (no third-party requests). Mobile first. */
@font-face{font-family:"Lilita One";src:url(/assets/fonts/lilita-one.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito-600.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito-800.woff) format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Nunito";src:url(/assets/fonts/nunito-900.woff) format("woff");font-weight:900;font-display:swap}
:root{--red:#E63B2E;--red-dk:#C42C21;--butter:#FFC845;--blue:#3D7DD8;--mint:#43B88C;--mint-dk:#23845F;--blue-dk:#2B65BA;--paper:#FFF4DD;--ink:#22201F;
  --cream:#FBEBCB;--card:#FFF8E9;--muted:#5E554A;--line:#EBD5A8;
  --disp:"Lilita One","Arial Black",sans-serif;--body:"Nunito","Trebuchet MS",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--card);color:var(--ink);font:600 18px/1.6 var(--body);overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--red-dk)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.05;margin:0;letter-spacing:.005em}
h1{font-size:clamp(42px,10vw,76px)}
h2{font-size:clamp(32px,7vw,48px)}
h3{font-size:30px}
p{margin:0 0 14px}
.inked{text-shadow:3px 3px 0 var(--ink)}

/* the bead row: the toy-label divider */
.beads{height:22px;background:
  radial-gradient(circle,var(--red) 0 6px,transparent 7px) 6px 5px/88px 22px repeat-x,
  radial-gradient(circle,var(--butter) 0 6px,transparent 7px) 28px 5px/88px 22px repeat-x,
  radial-gradient(circle,var(--blue) 0 6px,transparent 7px) 50px 5px/88px 22px repeat-x,
  radial-gradient(circle,var(--mint) 0 6px,transparent 7px) 72px 5px/88px 22px repeat-x}

/* header */
.top{padding:14px 0 10px;background:var(--card)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:block;width:196px}
.top nav{display:flex;gap:18px;align-items:center;font:800 16px var(--body)}
.top nav a{color:var(--ink);text-decoration:none}
.top nav a.btn{color:#fff}
.hide-s{display:none}
@media(min-width:640px){.hide-s{display:inline}.logo{width:250px}}

/* buttons + forms */
.btn{display:inline-block;background:var(--red-dk);color:#fff;border:3px solid var(--ink);border-radius:12px;font:400 21px var(--disp);letter-spacing:.02em;padding:11px 22px 12px;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn.small{font-size:17px;padding:7px 14px 8px;box-shadow:3px 3px 0 var(--ink)}
.btn:hover{background:#A9241B}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn[disabled]{opacity:.7;cursor:wait}
.form{display:flex;flex-direction:column;gap:12px;max-width:520px}
.field{font:600 18px var(--body);padding:13px 16px;border:3px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);width:100%;min-width:0}
@media(min-width:560px){.form{flex-direction:row}.form .field{flex:1}}
.privacy{font-size:15px;color:var(--muted);margin-top:10px}
.ok-card{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:16px 18px;max-width:520px;box-shadow:5px 5px 0 var(--mint)}
.ok-card h3{color:var(--mint-dk);font-size:26px;margin-bottom:6px}
.notice{font:800 16px var(--body);color:var(--red-dk);margin-top:8px}

/* hero */
.hero{padding:26px 0 54px;background:var(--card)}
.hero .wrap{display:grid;gap:30px;align-items:center}
.kicker{font:900 15px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--red-dk);margin-bottom:12px}
.hero .kicker{letter-spacing:.1em}
.hero h1 span{display:inline-block;margin-right:.18em}
.hero h1 .c1{color:var(--red)}.hero h1 .c2{color:var(--blue)}.hero h1 .c3{color:var(--mint)}.hero h1 .c4{color:var(--butter)}
.hero h1{text-shadow:3px 3px 0 var(--ink)}
.lead{font-size:20px;max-width:36ch;margin-top:18px}
.hero .cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero .cta a.quiet{color:var(--ink);font-weight:800}
.page-card{background:#fff;border:5px solid var(--ink);border-radius:20px;box-shadow:10px 10px 0 var(--ink);overflow:hidden}
.tilt-l{transform:rotate(-3deg)}.tilt-r{transform:rotate(2.5deg)}
.art{position:relative;max-width:400px;width:100%;margin:0 auto;padding:12px 18px 20px}
.marble{position:absolute;border-radius:50%;border:4px solid var(--ink);z-index:1}
.marble::after{content:"";position:absolute;width:42%;height:42%;left:14%;top:12%;border-top:4px solid #fff;border-radius:50%;transform:rotate(-28deg)}
@media(min-width:860px){.hero .wrap{grid-template-columns:1.1fr .9fr}.hero{padding:40px 0 80px}}

/* sections */
.sec{padding:56px 0;background:var(--cream)}
.sec-head{max-width:640px;margin-bottom:28px}
.sec-head h2{color:var(--ink)}
.books{display:grid;gap:28px}
@media(min-width:780px){.books{grid-template-columns:1fr 1fr}}
.book{background:var(--card);border:3px solid var(--ink);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:7px 7px 0 var(--ink)}
.book .thumb{background:var(--paper);border:2px dashed var(--line);border-radius:14px;padding:16px;display:flex;justify-content:center}
.book .thumb img,.book .thumb svg{max-height:300px;width:auto;border:3px solid var(--ink);border-radius:10px;background:#fff}
.badge{align-self:flex-start;background:var(--red-dk);color:#fff;font:900 14px var(--body);letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:2.5px solid var(--ink)}
.book h3{color:var(--blue);text-shadow:2px 2px 0 var(--ink)}
.book ul{margin:0;padding-left:22px}
.book li{margin:2px 0}
.book li::marker{color:var(--red)}
.book .fine{font-size:15px;color:var(--muted);margin:0}

/* gift: the blue toy-counter block */
.giftsec{background:var(--blue-dk);color:var(--paper);padding:56px 0}
.giftsec .kicker{color:var(--butter);font-size:19px}
.giftsec h2{color:var(--paper);text-shadow:3px 3px 0 var(--ink)}
.giftsec .lead{color:var(--paper)}
.giftsec .privacy{color:#fff}
.giftsec .notice{color:#fff}
.gift{display:grid;gap:30px;align-items:center}
@media(min-width:860px){.gift{grid-template-columns:1fr 1fr}}
.pack{position:relative;max-width:360px;width:100%;margin:0 auto}
.pack .sheet{background:var(--paper);color:var(--ink);border:4px solid var(--ink);border-radius:16px;padding:22px 20px;box-shadow:8px 8px 0 var(--ink);transform:rotate(-1.5deg)}
.pack .sheet h3{font-size:30px;text-align:center;color:var(--red);text-shadow:2px 2px 0 var(--ink)}
.pack .sheet p{text-align:center;font-size:15px;color:var(--muted);margin:6px 0 12px}
.pack ol{margin:0;padding-left:26px;font-size:17px}
.pack ol li::marker{font-family:var(--disp);color:var(--blue)}

/* simple pages */
.narrow{max-width:680px}
.card{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:20px 18px;margin:22px 0;box-shadow:6px 6px 0 var(--ink)}
.card h2{font-size:30px;color:var(--blue);margin-bottom:10px}
.page-h1{color:var(--red);text-shadow:3px 3px 0 var(--ink)}
.ledger{width:100%;border-collapse:collapse}
.ledger td{vertical-align:top;padding:16px 0;border-bottom:2px solid var(--line)}
.ledger td:first-child{font:400 21px var(--disp);color:var(--blue);padding-right:18px;width:34%}
@media(max-width:560px){.ledger td,.ledger td:first-child{display:block;width:100%}.ledger td:first-child{padding-bottom:0;border:0}}

footer{padding:34px 0 30px;font-size:15px;color:var(--muted);background:var(--card)}
footer .wrap{display:flex;flex-direction:column;gap:14px}
footer .row{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:800}
footer a{color:var(--ink)}
footer .mk{width:52px}
footer .tl{font:400 20px var(--disp);color:var(--red-dk);margin:0}
@media(prefers-reduced-motion:no-preference){.page-card{transition:transform .3s}.page-card:hover{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}