:root{
  --paper: #F6F1E4;
  --paper-dark: #ECE4CF;
  --ink: #2B2926;
  --sun: #FFC53D;
  --sun-ink: #6B4700;
  --sky: #3E7CB1;
  --sky-ink: #16324A;
  --cloud: #8B95A8;
  --cloud-ink: #2E3440;
  --snow: #A9C9DE;
  --snow-ink: #1F3A50;
  --grass: #4F9D69;
  --cherry: #D8483A;
  --cherry-dark: #B93A2E;
  --home: #8B5FBF;
  --home-ink: #3B2A54;
  --shadow: rgba(43,41,38,0.18);
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Nunito Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* subtle kraft-paper grain */
body::before{
  content:"";
  position: fixed; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.025) 0, transparent 40%);
  pointer-events:none;
  z-index:0;
}

.wrap{ max-width: 920px; margin: 0 auto; padding: 0 20px 80px; position:relative; z-index:1;}
.wrap-narrow{ max-width: 680px; margin: 0 auto; padding: 0 20px 80px; position:relative; z-index:1;}

a{ color: var(--sky); }

/* ================= SITE NAV ================= */
.site-nav{
  position: relative;
  z-index: 5;
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
}
.site-nav-inner{
  max-width: 920px;
  margin: 0 auto;
  padding: 16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.brand{
  font-family:'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-links{
  display:flex;
  gap: 22px;
  flex-wrap: wrap;
}
.nav-links a{
  font-family:'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration:none;
  padding: 12px 2px;
  border-bottom: 2.5px solid transparent;
}
.nav-links a:hover, .nav-links a.current{ border-bottom-color: var(--cherry); }

/* ================= HEADER (home hero) ================= */
header.hero{ text-align:center; margin: 32px 0 34px; }

.eyebrow{
  display:inline-block;
  font-family:'Nunito Sans', sans-serif;
  font-weight:800;
  font-size: 12.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cherry);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 6px 16px;
  transform: rotate(-2deg);
  margin-bottom: 18px;
}

h1{
  font-family:'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.05;
  margin: 0 0 12px;
}
h1 .hl{ color: var(--sky); position: relative; }

.sub{
  font-size: 17px;
  color: #55524C;
  max-width: 460px;
  margin: 0 auto;
  font-weight: 600;
}

/* ================= PAGE / CONTENT TYPOGRAPHY ================= */
.page-title{
  font-family:'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  margin: 40px 0 8px;
}
.page-sub{
  font-size: 16px;
  color:#55524C;
  font-weight:600;
  margin: 0 0 32px;
}

.article h1, .content h1{
  font-family:'Baloo 2', sans-serif;
  font-size: clamp(28px, 5vw, 40px);
  margin: 36px 0 6px;
  line-height:1.15;
}
.article .meta{
  font-size: 13.5px;
  font-weight: 800;
  color:#8A8579;
  margin-bottom: 28px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.article h2, .content h2{
  font-family:'Baloo 2', sans-serif;
  font-size: 24px;
  margin: 34px 0 12px;
}
.article p, .content p, .article li, .content li{
  font-size: 16.5px;
  line-height: 1.7;
  color:#3A3733;
  margin: 0 0 18px;
}
.article ul, .content ul{ padding-left: 22px; margin: 0 0 20px; }
.content h3{ font-family:'Baloo 2', sans-serif; font-size: 19px; margin: 26px 0 10px; }

/* ================= WEATHER PICKER ================= */
.picker-label{
  text-align:center;
  font-family:'Baloo 2', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 30px 0 14px;
}

.picker{ display:flex; justify-content:center; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }

.w-btn{
  font-family:'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 15px;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: 16px;
  border: 2.5px solid var(--ink);
  background: #fff;
  cursor:pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
  color: var(--ink);
}
.w-btn:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.w-btn:active{ transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
.w-btn .ic{ font-size: 20px; }

.w-btn.active{ color:#fff; }
.w-btn[data-w="sunny"].active{ background: var(--sun); color: var(--sun-ink); }
.w-btn[data-w="rainy"].active{ background: var(--sky); color:#fff; }
.w-btn[data-w="cloudy"].active{ background: var(--cloud); color:#fff; }
.w-btn[data-w="snowy"].active{ background: var(--snow); color: var(--snow-ink); }
.w-btn[data-w="indoor"].active{ background: var(--home); color:#fff; }

/* ================= AGE FILTER ================= */
.age-filter{ display:flex; justify-content:center; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }

.a-btn{
  font-family:'Nunito Sans', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 16px;
  min-height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: transparent;
  cursor:pointer;
  color: var(--ink);
  transition: background .12s ease, color .12s ease;
}
.a-btn:hover{ background: var(--paper-dark); }
.a-btn.active{ background: var(--ink); color: var(--paper); }

.empty-note{ text-align:center; font-weight:700; color:#8A8579; padding: 20px 0; }

/* ================= MAIN CARD ================= */
.stage{ display:flex; justify-content:center; margin-bottom: 44px; perspective: 1000px; }

.card{
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #fff;
  border: 3px solid var(--ink);
  padding: 38px 34px 30px;
  clip-path: polygon(
    0% 2%, 3% 0%, 97% 0%, 100% 2%,
    100% 98%, 97% 100%, 3% 100%, 0% 98%,
    0% 60%, 1.5% 58%, 0% 56%,
    0% 44%, 1.5% 42%, 0% 40%
  );
  box-shadow: 8px 8px 0 var(--shadow);
  min-height: 260px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s ease;
}
.card.shuffle{ transform: rotate(-1.2deg) scale(0.97); opacity: 0.4; }

.card-tag{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display:inline-flex;
  align-self:flex-start;
  gap:6px;
  padding: 5px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  color:#fff;
}

.card h2{
  font-family:'Baloo 2', sans-serif;
  font-size: clamp(24px, 4vw, 30px);
  margin: 0 0 12px;
  line-height:1.15;
}

.card p{
  font-size: 16px;
  line-height:1.55;
  color:#4A473F;
  margin: 0 0 22px;
  font-weight:600;
}

.card-meta{
  display:flex;
  gap: 18px;
  font-size: 13.5px;
  font-weight: 800;
  color:#5C584E;
  margin-bottom: 24px;
  flex-wrap:wrap;
}
.card-meta span{ display:flex; align-items:center; gap:5px; }

.draw-btn{
  font-family:'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color:#fff;
  background: var(--cherry);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 14px 24px;
  cursor:pointer;
  align-self:flex-start;
  max-width: 100%;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.draw-btn:hover{ transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); background: var(--cherry-dark); }
.draw-btn:active{ transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

/* ================= BROWSE GRID ================= */
.browse-label{
  font-family:'Baloo 2', sans-serif;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 16px;
  text-align:center;
}

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }

.mini{
  background: var(--paper-dark);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 14px 16px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
}
.mini:hover{ transform: translateY(-3px); background: #fff; }
.mini h3{ font-family:'Baloo 2', sans-serif; font-size: 15.5px; margin: 0 0 4px; }
.mini p{ font-size: 12.5px; color: #5C584E; margin:0; font-weight: 600; line-height:1.4; }

/* ================= BLOG LISTING ================= */
.post-list{ display:flex; flex-direction:column; gap: 16px; margin: 24px 0 40px; }
.post-card{
  display:block;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 20px 22px;
  text-decoration:none;
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.post-card:hover{ transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--shadow); }
.post-card .p-tag{
  display:inline-block;
  font-family:'Baloo 2', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--grass);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.post-card h2, .post-card h3{ font-family:'Baloo 2', sans-serif; font-size: 21px; margin: 0 0 8px; }
.post-card p{ font-size: 14.5px; color:#6B675D; margin:0; font-weight:600; line-height:1.5; }

/* ================= AD SLOTS ================= */
.ad-slot{
  margin: 36px auto;
  max-width: 728px;
  min-height: 90px;
  border: 2px dashed #B7AF9E;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Nunito Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #A8A18F;
  background: rgba(255,255,255,0.4);
}
.ad-slot.in-content{ max-width: 100%; min-height: 250px; }

/* ================= CONTACT / FORM ================= */
.info-box{
  background:#fff;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 6px 6px 0 var(--shadow);
  margin: 24px 0;
}
.info-box p{ margin: 0 0 10px; font-weight:600; }
.info-box a{ font-weight: 800; }

.placeholder-tag{
  display:inline-block;
  background: var(--sun);
  color: var(--sun-ink);
  font-weight: 800;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 6px;
}

/* ================= FOOTER ================= */
.site-footer{
  border-top: 3px solid var(--ink);
  margin-top: 60px;
  padding: 28px 20px 40px;
  text-align:center;
}
.footer-links{
  display:flex;
  justify-content:center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-family:'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 14px;
}
.footer-links a{ color: var(--ink); text-decoration:none; }
.footer-links a:hover{ color: var(--cherry); }
.site-footer .fine-print{
  font-size: 12.5px;
  color: #5C584E;
  font-weight:600;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce){
  .card, .w-btn, .draw-btn, .mini, .post-card{ transition:none; }
}

/* ================= ACCESSIBILITY: FOCUS STATES ================= */
a:focus-visible,
button:focus-visible,
.mini:focus-visible{
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* .mini is now a real <button> — reset native button chrome so it keeps its card look */
button.mini{
  font-family: inherit;
  text-align: left;
  width: 100%;
  display: block;
  appearance: none;
  -webkit-appearance: none;
}

/* Reclaim padding on the narrowest phones (~320-380px) so content has more room to breathe */
@media (max-width: 400px){
  .wrap, .wrap-narrow{ padding-left: 14px; padding-right: 14px; }
  .card{ padding: 30px 22px 24px; }
}