/* ==========================================================
   site.css — Readinario website
   Built from the design concept STYLE_TOKENS.css + components.css
   Changes vs concept: Google Fonts @import replaced by self-hosted
   subset fonts (no external requests); mobile-first layout added.
   ========================================================== */

/* ---- Self-hosted fonts (SIL Open Font License, see /assets/fonts/README.txt) ---- */
@font-face{font-family:"Fredoka";src:url("/assets/fonts/fredoka-latin.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("/assets/fonts/nunito-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Patrick Hand";src:url("/assets/fonts/patrickhand-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root {
  /* ---- Character colours (sampled from approved ref rainboots_white_try1.jpg) ---- */
  --c-coat:#5B89BB; --c-coat-deep:#2F5E93; --c-coat-soft:#DCE8F5;
  --c-scarf:#C9222A; --c-scarf-deep:#9E1A21; --c-nose:#EB222C;
  --c-fur:#9C6A47; --c-fur-deep:#6B4429; --c-ear:#FEC3B5; --c-button:#D2A877;
  --c-boot:#EEF1F3; --c-boot-shade:#B9C2CB;
  /* ---- Paper & ink ---- */
  --c-paper:#FFF8EA; --c-paper-2:#F6EBD3; --c-white:#FFFFFF; --c-ink:#1A1A1A; --c-ink-soft:#4A4440;
  /* ---- Semantic ---- */
  --color-bg:var(--c-paper); --color-surface:var(--c-white); --color-text:var(--c-ink);
  --color-text-muted:var(--c-ink-soft); --color-primary:var(--c-scarf); --color-primary-hover:var(--c-scarf-deep);
  --color-secondary:var(--c-coat-deep); --color-link:var(--c-coat-deep); --color-focus:var(--c-coat);
  /* ---- Typography ---- */
  --font-display:"Fredoka","Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-hand:"Patrick Hand","Comic Neue",cursive;
  --fs-xs:.875rem; --fs-sm:1rem; --fs-md:1.125rem; --fs-lg:1.5rem; --fs-xl:2rem; --fs-2xl:2.75rem; --fs-3xl:3.75rem;
  --fw-body:400; --fw-bold:800; --fw-display:700; --lh-tight:1.1; --lh-body:1.6;
  /* ---- Lines ---- */
  --line-thin:2px; --line:3px; --line-bold:5px;
  /* ---- Radii ---- */
  --radius-sm:10px; --radius-md:18px; --radius-lg:28px; --radius-pill:999px;
  --radius-wobbly:255px 18px 225px 18px / 18px 225px 18px 255px;
  /* ---- Shadows ---- */
  --shadow-sm:3px 3px 0 var(--c-ink); --shadow-md:5px 5px 0 var(--c-ink); --shadow-lg:8px 8px 0 var(--c-ink); --shadow-press:1px 1px 0 var(--c-ink);
  /* ---- Spacing ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --container:1160px;
  /* ---- Motion ---- */
  --ease:cubic-bezier(.34,1.56,.64,1); --dur:160ms;
  --texture-paper:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.35  0 0 0 0 0.2  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ================= Base (from components.css) ================= */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--color-bg) var(--texture-paper);color:var(--color-text);font:var(--fw-body) var(--fs-md)/var(--lh-body) var(--font-body);overflow-wrap:break-word}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:var(--fw-display);line-height:var(--lh-tight);letter-spacing:-.01em}
h1{font-size:2.5rem} h2{font-size:2rem} h3{font-size:1.45rem}
p+p{margin-top:var(--space-4)}
a{color:var(--color-link);font-weight:700;text-underline-offset:3px;text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:4px solid var(--color-focus);outline-offset:4px;border-radius:6px}
img{display:block;max-width:100%;height:auto}
ul,ol{padding-left:1.25em}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-5)}
.hand{font-family:var(--font-hand);font-size:1.35rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;border:var(--line) solid var(--c-ink);border-radius:var(--radius-pill);padding:8px 16px;font:600 1rem var(--font-display);color:var(--c-ink)}
.skip-link:focus{top:12px}

/* ================= Buttons ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;font:600 1.15rem/1.2 var(--font-display);padding:12px 26px;border:var(--line) solid var(--c-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);text-decoration:none;cursor:pointer;text-align:center;transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.btn:active{transform:translate(4px,4px);box-shadow:var(--shadow-press)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-secondary{background:var(--c-white);color:var(--c-coat-deep)}
.btn-blue{background:var(--c-coat-deep);color:#fff}
.btn-sm{font-size:1rem;min-height:44px;padding:8px 18px;box-shadow:var(--shadow-sm)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6)}

/* ================= Nav ================= */
.nav{background:var(--c-white);border-bottom:var(--line) solid var(--c-ink)}
.nav .container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);padding-top:var(--space-3);padding-bottom:var(--space-3)}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 1.35rem var(--font-display);color:var(--c-ink);text-decoration:none;min-height:44px}
.logo .dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--c-nose);border:var(--line) solid var(--c-ink)}
.nav ul{display:flex;flex-wrap:wrap;gap:0 var(--space-4);list-style:none;padding:0;width:100%}
.nav ul a{display:inline-block;color:var(--c-ink);text-decoration:none;font:600 1.05rem var(--font-display);padding:10px 2px 6px;border-bottom:4px solid transparent}
.nav ul a:hover{border-color:var(--c-coat-soft)}
.nav ul a[aria-current="page"]{border-color:var(--c-scarf)}
.nav .nav-cta{display:none}

/* ================= Cards & bits ================= */
.card{background:var(--color-surface);border:var(--line) solid var(--c-ink);border-radius:var(--radius-md);box-shadow:var(--shadow-md);overflow:hidden}
.card-body{padding:var(--space-5)}
.card h3{margin-bottom:6px}
.wobbly{border-radius:var(--radius-wobbly)}
.badge{display:inline-block;font:600 .875rem var(--font-display);padding:3px 12px;border:var(--line-thin) solid var(--c-ink);border-radius:var(--radius-pill);background:var(--c-ear);color:var(--c-ink)}
.badge.blue{background:var(--c-coat-soft)} .badge.tan{background:var(--c-button)}
.bubble{position:relative;background:#fff;border:var(--line) solid var(--c-ink);border-radius:var(--radius-wobbly);padding:10px 18px;font-family:var(--font-hand);font-size:1.4rem;line-height:1.2;box-shadow:var(--shadow-sm)}
.crayon{background:linear-gradient(transparent 62%,var(--c-ear) 62%,var(--c-ear) 90%,transparent 90%);padding:0 4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.crayon.blue{background:linear-gradient(transparent 62%,var(--c-coat-soft) 62%,var(--c-coat-soft) 90%,transparent 90%)}
.wave{height:22px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='22'><path d='M0 11 Q15 0 30 11 T60 11' fill='none' stroke='%231A1A1A' stroke-width='3'/></svg>") repeat-x center}
.eyebrow{display:block;font:700 .875rem var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--c-fur-deep);margin-bottom:var(--space-3)}
.lead{font-size:1.2rem;color:var(--c-ink-soft);max-width:36em}
.muted{color:var(--c-ink-soft)}
.fine{font-size:var(--fs-xs);color:var(--c-ink-soft);margin-top:var(--space-3)}

/* Book cover placeholder (CSS only). 1/1 matches the 8.5×8.5 in trim. */
.cover{aspect-ratio:1/1;background:var(--c-coat);border-bottom:var(--line) solid var(--c-ink);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:14px 14px 0;overflow:hidden}
.cover .label{background:#fff;border:var(--line) solid var(--c-ink);border-radius:var(--radius-sm);padding:8px 10px;text-align:center;width:100%}
.cover .t{font:700 1.05rem/1.15 var(--font-display)}
.cover .by{font:600 .8rem/1.2 var(--font-display);color:var(--c-fur-deep);margin-top:4px}
.cover img{width:56%;margin-top:auto}

/* Coloring page preview */
.page-prev{aspect-ratio:8.5/11;background:#fff;border-bottom:var(--line) solid var(--c-ink);display:flex;align-items:center;justify-content:center;padding:22px;position:relative}
.page-prev::before{content:"";position:absolute;inset:12px;border:var(--line-thin) dashed var(--c-boot-shade);border-radius:6px}
.page-prev img{max-height:100%;width:auto;position:relative}
.page-prev .soon{position:relative;font:600 1.2rem var(--font-display);color:var(--c-ink-soft);text-align:center;padding:0 var(--space-4)}
.page-card .badge{position:absolute;top:18px;left:18px;z-index:1}
.page-card{position:relative}

/* Inputs / signup */
.signup{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-5);max-width:520px}
.signup label{font:600 1rem var(--font-display)}
.signup .row{display:flex;flex-direction:column;gap:var(--space-3)}
.input{width:100%;min-height:52px;font:600 1.05rem var(--font-body);padding:12px 20px;border:var(--line) solid var(--c-ink);border-radius:var(--radius-pill);background:#fff;color:var(--c-ink)}
.input:focus{outline:4px solid var(--color-focus);outline-offset:2px}
.signup .consent{display:flex;align-items:flex-start;gap:12px;margin:0}
.signup .consent input[type="checkbox"]{flex:none;width:22px;height:22px;margin-top:4px;accent-color:var(--c-scarf)}
.signup .consent label{font:var(--fw-body) 1rem/var(--lh-body) var(--font-body)}
.news-sub{font-size:1.15rem;margin:var(--space-6) 0 var(--space-3)}

/* ================= Sections ================= */
.section{padding:var(--space-8) 0}
.section.alt{background:var(--c-paper-2);border-top:var(--line) solid var(--c-ink);border-bottom:var(--line) solid var(--c-ink)}
.section.blue{background:var(--c-coat-soft);border-top:var(--line) solid var(--c-ink);border-bottom:var(--line) solid var(--c-ink)}
.sec-head{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6)}
.sec-head p{color:var(--c-ink-soft);max-width:520px}

/* Hero */
.hero{padding:var(--space-7) 0 var(--space-8);overflow:hidden}
.hero .container{display:grid;gap:var(--space-6);align-items:center}
.hero h1{margin-bottom:var(--space-4)}
.hero-art{position:relative;display:flex;justify-content:center;padding-top:56px;max-width:420px;margin:0 auto;width:100%}
.hero-art .blob{position:absolute;inset:90px 0 10px;background:var(--c-coat-soft);border:var(--line-bold) solid var(--c-ink);border-radius:var(--radius-wobbly)}
.hero-art img{position:relative;width:78%;max-width:340px}
.hero-art .bubble{position:absolute;top:0;left:0;z-index:2}

/* Steps */
.steps{display:grid;gap:var(--space-5)}
.step{text-align:center;padding:var(--space-6) var(--space-5)}
.step .n{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;border:var(--line) solid var(--c-ink);display:grid;place-items:center;font:700 1.5rem var(--font-display);background:var(--c-ear)}
.step:nth-child(2) .n{background:var(--c-coat-soft)}
.step:nth-child(3) .n{background:var(--c-button)}
.step p{color:var(--c-ink-soft)}

/* Book teaser */
.book-teaser{display:grid;gap:var(--space-6);align-items:center}
.book-teaser .card{max-width:320px;width:100%;margin:0 auto}
.book-teaser .btn{margin-top:var(--space-3)}

/* Free pages stack (home) */
.free{display:grid;gap:var(--space-7);align-items:center}
.stack{position:relative;height:360px;max-width:420px;width:100%;margin:0 auto}
.stack .card{position:absolute;width:56%}
.stack .one{left:4%;top:24px;transform:rotate(-6deg)}
.stack .two{right:4%;top:0;transform:rotate(5deg)}

/* Meet */
.meet{display:grid;gap:var(--space-7);align-items:center}
.sheet{background:#fff;padding:var(--space-3)}
.facts{display:grid;gap:var(--space-4);margin-top:var(--space-5)}
.fact{background:#fff;border:var(--line) solid var(--c-ink);border-radius:var(--radius-md);padding:14px 18px;box-shadow:var(--shadow-sm)}
.fact b{font-family:var(--font-display);font-weight:600;font-size:1.1rem;display:block}
.fact span{color:var(--c-ink-soft);font-size:1rem}
.fact .sw{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--c-ink);margin-right:8px;vertical-align:-1px}
.sw-red{background:var(--c-scarf)} .sw-nose{background:var(--c-nose)} .sw-blue{background:var(--c-coat)} .sw-boot{background:var(--c-boot)} .sw-fur{background:var(--c-fur)} .sw-tan{background:var(--c-button)}

/* Page header (inner pages) */
.page-head{padding:var(--space-7) 0}
.page-head .container{display:grid;gap:var(--space-6);align-items:center}
.page-head h1{margin-bottom:var(--space-4)}
.head-art{position:relative;max-width:360px;width:100%;margin:0 auto}
.head-art .blob{position:absolute;inset:40px 0 0;background:var(--c-coat-soft);border:var(--line-bold) solid var(--c-ink);border-radius:var(--radius-wobbly)}
.head-art img{position:relative;width:80%;margin:0 auto}

/* Free pages grid */
.pages-grid{display:grid;gap:var(--space-6)}
.tips{display:grid;gap:var(--space-4);margin-top:var(--space-6);list-style:none;padding:0}
.tips li{background:#fff;border:var(--line) solid var(--c-ink);border-radius:var(--radius-md);padding:12px 18px;box-shadow:var(--shadow-sm)}
.tips b{font-family:var(--font-display);font-weight:600}

/* CTA band */
.cta-band{text-align:center}
.cta-band .btn-row{justify-content:center}

/* Small centered pages (thank-you / 404) */
.center-page{padding:var(--space-8) 0 var(--space-9);text-align:center}
.center-page .container{display:flex;flex-direction:column;align-items:center}
.center-page img{width:200px;margin-bottom:var(--space-5)}
.center-page p{max-width:32em}
.center-page .btn-row{justify-content:center}
.peek{position:relative;width:240px;height:150px;overflow:hidden;margin-bottom:var(--space-5);border-bottom:var(--line-bold) solid var(--c-ink)}
.peek img{position:absolute;width:240px;max-width:none;left:0;top:28px;margin:0}

/* Prose (privacy) */
.prose{max-width:46em}
.prose h2{font-size:1.6rem;margin:var(--space-6) 0 var(--space-3)}
.prose ul{margin-top:var(--space-3)}
.prose li+li{margin-top:var(--space-2)}
.note{background:var(--c-ear);border:var(--line) solid var(--c-ink);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-sm);margin:var(--space-5) 0}
.ph{background:#FFF3B0;padding:0 3px;border-radius:4px}

/* ================= Footer ================= */
.site-footer{background:var(--c-fur-deep);color:#fff;padding:var(--space-7) 0 var(--space-6);border-top:var(--line-bold) solid var(--c-ink)}
.site-footer .container{display:grid;gap:var(--space-6)}
.site-footer nav{display:grid;gap:var(--space-6)}
.site-footer p{opacity:.9;margin-top:var(--space-2)}
.site-footer b{font-family:var(--font-display);font-weight:600}
.site-footer ul{list-style:none;padding:0}
.site-footer a{color:#fff;font-weight:600;display:inline-flex;align-items:center;min-height:44px;padding:6px 0;text-decoration:none}
.site-footer .logo{color:#fff;display:inline-flex;padding:0}
.site-footer a:hover{text-decoration:underline}
.site-footer a:focus-visible{outline-color:#fff}
.site-footer .legal{border-top:2px solid rgba(255,255,255,.3);padding-top:var(--space-4);font-size:var(--fs-xs)}

/* ================= Larger screens ================= */
@media (min-width:640px){
  h1{font-size:3rem} h2{font-size:2.4rem}
  .signup .row{flex-direction:row}
  .signup .row .input{flex:1}
  .steps{grid-template-columns:repeat(3,1fr)}
  .pages-grid{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:1fr 1fr}
  .tips{grid-template-columns:repeat(3,1fr)}
  .site-footer .container{grid-template-columns:2fr 1fr 1fr}
  .site-footer nav{grid-column:2 / -1;grid-template-columns:1fr 1fr}
  .site-footer .legal{grid-column:1/-1}
  .stack{height:420px}
}
@media (min-width:960px){
  h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:1.45rem}
  .nav .container{flex-wrap:nowrap;height:76px;padding-top:0;padding-bottom:0;gap:var(--space-6)}
  .nav ul{width:auto;margin-left:auto;gap:var(--space-5)}
  .nav .nav-cta{display:inline-flex}
  .hero{padding:72px 0 56px}
  .hero h1{font-size:4rem}
  .hero .container{grid-template-columns:1.15fr .85fr;gap:40px}
  .sec-head{flex-direction:row;justify-content:space-between;align-items:end}
  .book-teaser{grid-template-columns:320px 1fr;gap:var(--space-8)}
  .free{grid-template-columns:1fr 1fr}
  .meet{grid-template-columns:440px 1fr}
  .page-head .container{grid-template-columns:1.2fr .8fr}
  .pages-grid{grid-template-columns:repeat(3,1fr)}
  .section{padding:var(--space-9) 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:hover,.btn:active{transform:none}
}
.cta-lead{margin:var(--space-3) auto 0}
/* v1.1: single-column signup band when no pose art is in the slot */
.solo{max-width:720px}
.center-page img.pose-jump{width:220px}
.page-head .head-art{max-width:320px}

/* ================= Coming-soon mode ================= */
body.coming-soon .cover-hero{padding:var(--space-6) 0 var(--space-5)}
body.coming-soon .cover-hero .container{max-width:48rem}
.cover-frame{position:relative;width:100%;max-width:44rem;margin:0 auto;aspect-ratio:1/1;container-type:inline-size;background:#d3f0fc;border:var(--line) solid var(--c-ink);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden}
.cover-frame img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.cover-title{position:absolute;top:0;left:0;right:0;height:33.333%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4% 7% 0;color:var(--c-ink);pointer-events:none}
.cover-title h1{font-family:var(--font-display);font-weight:700;line-height:1.12;letter-spacing:-.02em;font-size:clamp(1.8rem,8.4cqi,3.6rem);text-wrap:balance;max-width:20ch;margin:0;color:var(--c-ink)}
body.coming-soon .coming-copy,body.coming-soon .solo{text-align:center}
body.coming-soon .coming-copy .badge{margin-bottom:var(--space-4)}
body.coming-soon .coming-copy .lead,body.coming-soon .solo > p{margin-inline:auto}
body.coming-soon .signup{margin-inline:auto;text-align:left}
body.coming-soon .meet-blurb h2{margin-bottom:var(--space-3)}
body.coming-soon .meet-blurb p{font-size:1.15rem;color:var(--c-ink-soft);max-width:32em;margin-inline:auto}
/* Compact footer: brand + one link list, no Explore/Free Pages columns */
.site-footer.compact .container{display:grid;gap:var(--space-6)}
.site-footer.compact nav{display:block}
.site-footer.compact ul{display:flex;flex-wrap:wrap;gap:0 var(--space-5)}
.site-footer.compact .legal{grid-column:1/-1}
@media (min-width:640px){
  .site-footer.compact .container{grid-template-columns:1.4fr 1fr;align-items:start}
  .site-footer.compact nav{grid-column:auto}
  .site-footer.compact ul{justify-content:flex-end}
}
@media (min-width:960px){
  body.coming-soon .cover-hero{padding:var(--space-7) 0 var(--space-6)}
  body.coming-soon .nav .container{justify-content:flex-start}
}
body.coming-soon .coming-copy .subtitle{font:600 clamp(1.15rem,2.4vw,1.45rem)/1.35 var(--font-display);color:var(--c-ink);max-width:34em;margin:0 auto var(--space-4);text-wrap:balance}