/* ChildrenStory.org — a modern storybook, with 1998 in its bones.
   Warm parchment, ink, gold, and a different jewel tone per shelf. */
:root{
  --paper:#fbf5e7;
  --paper-2:#f4ead2;
  --ink:#2b2218;
  --ink-soft:#5a4d3b;
  --gold:#b8862b;
  --gold-deep:#8a6216;
  --rule:#e3d4b0;
  --shadow:rgba(58,42,18,.16);
  /* shelf accents */
  --fairy:#6a2f6b;     /* plum  */
  --fable:#2f6b4f;     /* forest */
  --rhyme:#b4452f;     /* terracotta */
  --bedtime:#314a7e;   /* dusk blue */
  --holiday:#9a2233;   /* holly red */
  --accent:var(--fairy);
  --maxw:760px;
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --display:'Playfair Display',Georgia,serif;
  --type:'Special Elite','Courier New',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.78;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(184,134,43,.05), transparent 40%),
    radial-gradient(circle at 88% 8%, rgba(106,47,107,.05), transparent 35%);
}
img{max-width:100%;height:auto}
a{color:var(--gold-deep);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wide{max-width:1080px}

/* ---- decorative top rule ---- */
.tape{height:7px;background:
  repeating-linear-gradient(90deg,var(--gold) 0 14px,transparent 14px 28px),
  linear-gradient(var(--accent),var(--accent));
  background-blend-mode:multiply;opacity:.9}

/* ---- header ---- */
header.site{position:sticky;top:0;z-index:50;background:rgba(251,245,231,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:18px;max-width:1080px;margin:0 auto;padding:12px 22px}
.brand{display:flex;flex-direction:column;line-height:1;margin-right:auto}
.brand .kicker{font-family:var(--type);font-size:.62rem;letter-spacing:.18em;color:var(--gold-deep);text-transform:uppercase}
.brand .name{font-family:var(--display);font-weight:800;font-size:1.42rem;color:var(--ink);letter-spacing:.01em}
.brand .name a{color:inherit;text-decoration:none}
.brand .name b{color:var(--accent)}
nav.top{display:flex;gap:16px;flex-wrap:wrap}
nav.top a{font-family:var(--serif);font-size:.93rem;color:var(--ink-soft);font-weight:600}
nav.top a:hover{color:var(--accent);text-decoration:none}
.btn-read-top{font-family:var(--serif);font-weight:700;font-size:.9rem;border:1.5px solid var(--gold);
  color:var(--gold-deep);background:#fff8e9;border-radius:999px;padding:7px 15px;cursor:pointer}
.btn-read-top:hover{background:var(--gold);color:#fff}

/* ---- hero ---- */
.hero{text-align:center;padding:64px 22px 40px;position:relative}
.hero .seal{display:inline-block;font-family:var(--type);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);border:1.5px solid var(--gold);border-radius:999px;padding:5px 16px;margin-bottom:22px;background:#fff8e9}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,6vw,4rem);line-height:1.04;margin:.1em 0 .25em;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p.lead{font-size:1.18rem;color:var(--ink-soft);max-width:600px;margin:0 auto 28px}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--serif);font-weight:700;font-size:1.02rem;border-radius:999px;padding:13px 26px;cursor:pointer;border:2px solid transparent;display:inline-flex;align-items:center;gap:9px;transition:.15s}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px var(--shadow)}
.btn-primary:hover{filter:brightness(1.08);text-decoration:none;transform:translateY(-1px)}
.btn-ghost{background:#fff8e9;border-color:var(--gold);color:var(--gold-deep)}
.btn-ghost:hover{background:var(--gold);color:#fff;text-decoration:none}

/* ---- shelves (category grid) ---- */
.section-h{font-family:var(--display);font-weight:800;font-size:1.7rem;margin:48px 0 6px;text-align:center}
.section-sub{text-align:center;color:var(--ink-soft);margin:0 0 26px}
.shelves{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:26px 0}
.shelf{display:block;border-radius:14px;padding:26px 24px 22px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 8px 22px var(--shadow);min-height:160px}
.shelf:hover{text-decoration:none;transform:translateY(-3px);transition:.18s}
.shelf .glyph{font-family:var(--display);font-size:2.4rem;opacity:.9;line-height:1}
.shelf h3{font-family:var(--display);font-weight:800;font-size:1.4rem;margin:.3em 0 .15em;color:#fff}
.shelf p{margin:0;font-size:.95rem;opacity:.92}
.shelf .count{position:absolute;top:18px;right:20px;font-family:var(--type);font-size:.7rem;letter-spacing:.08em;
  background:rgba(255,255,255,.2);border-radius:999px;padding:4px 11px}
.shelf.fairy{background:linear-gradient(135deg,#6a2f6b,#43204a)}
.shelf.fable{background:linear-gradient(135deg,#2f6b4f,#1c4733)}
.shelf.rhyme{background:linear-gradient(135deg,#b4452f,#7e2c1e)}
.shelf.bedtime{background:linear-gradient(135deg,#314a7e,#1f2f52)}
.shelf.holiday{background:linear-gradient(135deg,#9a2233,#5f1320)}
.shelf.classic{background:linear-gradient(135deg,#3a3024,#211a12)}

/* ---- story card grid ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:24px 0}
.card{background:#fffdf6;border:1px solid var(--rule);border-radius:12px;padding:0;overflow:hidden;
  box-shadow:0 3px 10px rgba(58,42,18,.07);display:flex;flex-direction:column;transition:.15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px var(--shadow);text-decoration:none}
.card .spine{height:8px;background:var(--accent)}
.card .body{padding:16px 17px 15px;display:flex;flex-direction:column;gap:7px;height:100%}
.card .ct{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--ink);line-height:1.2}
.card .meta{font-family:var(--type);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-top:auto}
.card .src{font-size:.83rem;color:var(--ink-soft);font-style:italic}

/* ---- story reading page ---- */
.crumbs{font-size:.86rem;color:var(--ink-soft);margin:26px 0 4px}
.crumbs a{color:var(--ink-soft)}
article.story{padding:6px 0 10px}
article.story h1{font-family:var(--display);font-weight:900;font-size:clamp(2rem,5vw,3rem);line-height:1.08;margin:.1em 0 .15em}
.byline{font-family:var(--type);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px}
.story-text{font-size:1.16rem;line-height:1.92}
.story-text p{margin:0 0 1.15em}
.story-text.verse p{white-space:pre-line;font-style:normal;margin-bottom:1.3em;text-align:left}
.story-text p:first-of-type:first-letter{font-family:var(--display);font-weight:900;font-size:3.2em;line-height:.8;float:left;margin:.04em .12em 0 0;color:var(--accent)}
.story-text.verse p:first-of-type:first-letter{font-size:1em;float:none;margin:0;color:inherit}
.divider{display:flex;align-items:center;gap:14px;color:var(--gold);margin:30px 0}
.divider::before,.divider::after{content:"";height:1px;background:var(--rule);flex:1}
.moral{background:#fff8e9;border-left:4px solid var(--gold);border-radius:8px;padding:14px 18px;font-style:italic;margin:22px 0}

/* read-aloud panel inline */
.readbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fffdf6;border:1px solid var(--rule);
  border-radius:14px;padding:14px 18px;margin:18px 0 30px;box-shadow:0 4px 12px rgba(58,42,18,.07)}
.readbox .grandma{font-size:1.9rem;line-height:1}
.readbox .rb-text{font-size:.94rem;color:var(--ink-soft);margin-right:auto}
.readbox .rb-text b{color:var(--ink);font-family:var(--display)}
.rb-btn{font-family:var(--serif);font-weight:700;border:none;border-radius:999px;padding:10px 18px;cursor:pointer;font-size:.95rem}
.rb-go{background:var(--accent);color:#fff}
.rb-go:hover{filter:brightness(1.08)}
.rb-stop{background:#efe4c8;color:var(--ink)}
select.voicepick{font-family:var(--serif);border:1px solid var(--rule);border-radius:8px;padding:7px 9px;background:#fff;color:var(--ink);font-size:.85rem}
.sent.spoken{background:linear-gradient(transparent 60%, #ffe9a8 60%);border-radius:3px}

/* prev/next */
.pager{display:flex;justify-content:space-between;gap:14px;margin:34px 0;border-top:1px solid var(--rule);padding-top:18px}
.pager a{display:flex;flex-direction:column;max-width:46%}
.pager .lbl{font-family:var(--type);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.pager .nx{text-align:right;margin-left:auto}
.pager .t{font-family:var(--display);font-weight:700}

/* floating read button */
#float-read{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--accent);color:#fff;border:none;
  border-radius:999px;padding:13px 20px;font-family:var(--serif);font-weight:700;font-size:.95rem;cursor:pointer;
  box-shadow:0 8px 22px var(--shadow);display:flex;align-items:center;gap:8px}
#float-read:hover{filter:brightness(1.08)}
#float-read.reading{background:var(--holiday)}

/* search on index */
.search{display:block;width:100%;font-family:var(--serif);font-size:1.05rem;padding:13px 18px;border:1.5px solid var(--rule);
  border-radius:999px;background:#fffdf6;margin:8px 0 22px}
.search:focus{outline:none;border-color:var(--gold)}

/* masthead (agents-first visibility) */
.masthead-af{background:#fff8e9;border:1px dashed var(--gold);border-radius:12px;padding:16px 20px;margin:30px auto;max-width:var(--maxw);font-size:.9rem;color:var(--ink-soft)}
.masthead-af b{color:var(--ink);font-family:var(--display)}
.masthead-af a{font-weight:600}

/* footer */
footer.site{margin-top:64px;background:#211a12;color:#d8c9a8;padding:38px 22px 30px}
footer.site .wrap{max-width:1080px}
footer.site a{color:#e7c878}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px;margin-bottom:22px}
footer.site h4{font-family:var(--display);font-size:1rem;color:#fff;margin:0 0 8px}
footer.site .fine{border-top:1px solid #3a3024;padding-top:16px;font-size:.82rem;color:#a8997b;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.est{font-family:var(--type);letter-spacing:.06em}

@media(max-width:640px){
  body{font-size:18px}
  nav.top{display:none}
  .bar{gap:10px}
  .hero{padding:40px 18px 28px}
}