/* Reset & base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "IBM Plex Mono", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
  color: #111; background: #fff;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { padding: 0; margin: 0; list-style: none; }
button, select { font: inherit; cursor: pointer; }
.sr-only { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.skip-link { position:absolute; top:-40px; left:0; background:#000; color:#fff; padding:.5rem; z-index:10000; }
.skip-link:focus { top:0; }

/* Tokens */
:root{
  --ink:#111; --muted:#555; --brand:#ff7aa2; --chip:#f4f6f8; --card:#fff8fb;
  --radius:18px; --shadow:0 10px 24px rgba(0,0,0,.08);
}

/* Header */
.site-header{
  position: sticky; top:0; z-index:1000;
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center;
  padding:.75rem 1rem; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid #eee;
}
.logo img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.site-nav .menu-toggle{ display:none; background:#fff; border:1px solid #ddd; border-radius:12px; padding:.5rem .75rem; }
.nav-list{ display:flex; gap:1rem; justify-content:center; align-items:center; }
.nav-list a{ padding:.5rem .75rem; border-radius:12px; }
.nav-list a:hover, .nav-list a:focus{ background:#f4f4f4; outline:none; }
.header-cta{ display:flex; gap:.5rem; align-items:center; }
.voice-ctrl select{ border:1px solid #000; border-radius:12px; padding:.35rem .5rem; background:#fff; }

/* Update banner */
.update-banner{
  display:flex; gap:.75rem; justify-content:center; align-items:center;
  padding:.5rem 1rem; background:#fff0f5; border-bottom:1px solid #f4cddd; font-size:.95rem;
}

/* Confetti canvas (overlay) */
#confetti{
  position: fixed; inset: 0; pointer-events: none; display: block;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--brand); color:#fff; border:1px solid #000; border-bottom-width:2px;
  padding:.6rem 1rem; border-radius:16px; box-shadow:var(--shadow);
}
.btn.small{ padding:.4rem .7rem; font-size:.9rem; }
.btn.btn-outline{ background:#fff; color:#000; }
.chip{
  background: var(--chip); border:1px solid #000; border-bottom-width:2px; border-radius: 999px;
  padding:.45rem .85rem;
}

/* Hero (single column with thumbnails) */
.hero{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:clamp(1rem, 4vw, 3rem) 1rem;
  background-image:url("folder-img/cat6.svg"); background-size:cover; background-position:center;
}
#mainHeroImg{
  border-radius:24px; border:1px solid #000; box-shadow:var(--shadow);
  transition: opacity .25s ease;
}
.thumbs{ display:flex; gap:.5rem; margin-top:.5rem; justify-content:center; }
.thumbs img{
  width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid #000;
  cursor:pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.thumbs img:hover{ transform: scale(1.1); }
.thumbs img.active{ box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000; }

.hero-text h1{
  font-family:"Audiowide", system-ui; letter-spacing:.5px; text-align:center;
  font-size:clamp(1.8rem, 3vw, 3rem);
  -webkit-text-fill-color:transparent; -webkit-text-stroke:1px #000; text-shadow:2px 2px #fff;
}
.hero-text p{ max-width:60ch; text-align:center; margin:.5rem 0 1rem; }
.hero-actions{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; }

/* Tools */
.tools{ padding:1rem; }
.tool-row{
  display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center;
  max-width:1100px; margin:0 auto;
}
#storySearch{ width:100%; padding:.9rem 1rem; border:1px solid #000; border-radius:14px; box-shadow:inset 0 2px 0 #000; }
.filters{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip[aria-pressed="true"]{ background:#000; color:#fff; }

/* Cards */
.cards{ padding:1rem; }
.cards h2, .by-age h2, .stories h2, .jokes h2, .newsletter h2{
  text-align:center; font-family:"Baloo 2", system-ui; text-transform:uppercase; letter-spacing:.5px;
}
.new-actions{ display:flex; justify-content:center; margin:.25rem auto 0; }
#weeklyStoryContainer{ max-width:900px; margin:1rem auto; }

.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; max-width:1100px; margin:1rem auto;
}
.card{ background:var(--card); border:1px solid #000; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.card img{ aspect-ratio:4/3; object-fit:cover; }
.card-body{ padding:.9rem 1rem; }
.card h3{ margin:.25rem 0; font-size:1.05rem; }

/* By age */
.by-age{ padding:1rem; }
.age-rows{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:900px; margin:1rem auto; }
.age-tile{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem; border:1px solid #000; border-radius:16px; background:#fff; }
.age-tile img{ width:32px; height:32px; }

/* Stories */
.stories{ padding:1rem; }
.story{
  max-width:900px; margin:1.25rem auto; background:#fff; border:1px solid #000; border-radius:18px; box-shadow:var(--shadow);
  overflow:hidden;
}
.story-header{ display:flex; gap:1rem; padding:1rem; align-items:center; border-bottom:1px dashed #000; }
.story-header img{ width:120px; height:120px; object-fit:cover; border-radius:18px; border:1px solid #000; }
.story .meta{ color:var(--muted); font-size:.95rem; }
.story-summary{ display:block; cursor:pointer; padding:.9rem 1rem; background:#fff8fb; border-top:1px dashed #000; border-bottom:1px dashed #000; }
.story-body{ padding:1rem 1.2rem; }
.story-body p{ margin:.5rem 0; }
.story-actions{ display:flex; gap:.5rem; flex-wrap:wrap; padding:.8rem 1rem 1.2rem; }
.story-actions .chip i{ font-size:1.1rem; }

/* Jokes */
.jokes{ background-image:url("folder-img/T.jpg"); background-repeat:no-repeat; background-position:right bottom; background-size:240px; padding:1rem; }
.jotd{ max-width:900px; margin:.5rem auto; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
#jokeOutput{ margin:0; font-weight:500; }
.faq{ max-width:900px; margin:.5rem auto 0; }
.faq details{ background:#fff; border:1px solid #000; border-radius:16px; padding:.5rem .9rem; margin:.5rem 0; }

/* Videos — small & loop */
.video-wrap{ max-width:720px; margin:.75rem auto; padding:0 1rem; }
.tinyvid{ width:100%; max-width:560px; border-radius:18px; border:1px solid #000; }

/* Newsletter */
.newsletter{ padding:1rem; text-align:center; }
.nl-form{ display:flex; gap:.5rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.nl-form input{ padding:.7rem 1rem; border:1px solid #000; border-radius:12px; min-width:260px; }
.nl-form small{ display:block; width:100%; color:var(--muted); margin-top:.25rem; }

/* Footer */
.site-footer{ padding:1.5rem 1rem; text-align:center; border-top:1px solid #eee; color:#333; }
.site-footer nav{ display:flex; gap:1rem; justify-content:center; margin-bottom:.5rem; }

/* Responsive */
@media (max-width:900px){
  .tool-row{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .site-nav .menu-toggle{ display:inline-flex; }
  .nav-list{
    position:fixed; inset:64px 0 auto 0; background:#fff; border-top:1px solid #eee;
    transform:translateY(-120%); transition:transform .3s ease; padding:.75rem 1rem;
    display:flex; flex-direction:column; gap:.5rem;
  }
  .nav-list.open{ transform:translateY(0); }
}