/* =========================================================
   Homepage rebuild 2026 — visual direction made real in HTML/CSS
   ========================================================= */
.storybook-hero{
  background:#231734;
  overflow:hidden;
}
.storybook-hero-frame{
  position:relative;
  width:100%;
  max-width:1672px;
  margin:0 auto;
  aspect-ratio:1672 / 941;
  background:#3b2851;
}
.storybook-hero-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.storybook-hero-hotspots{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-hotspot{
  position:absolute;
  top:4.9%;
  height:7.8%;
  z-index:2;
  pointer-events:auto;
  border-radius:999px;
  text-decoration:none;
  outline:none;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.hero-hotspot span{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.hero-hotspot:hover,
.hero-hotspot:focus-visible{
  transform:translateY(-2px);
  background:rgba(255,255,255,.16);
  box-shadow:0 0 0 4px rgba(255,255,255,.72), 0 9px 18px rgba(42,26,58,.24);
}
.hero-hotspot:active{ transform:translateY(1px) scale(.98); }
.hero-map{left:46.1%;width:7.7%;}
.hero-family{left:54.5%;width:8%;}
.hero-residents{left:63.2%;width:9.7%;}
.hero-creatures{left:73.6%;width:10.1%;}
.hero-things{left:84.3%;width:12.2%;}
.storybook-mobile-nav{display:none;}
@media(max-width:760px){
  .storybook-hero-hotspots{display:none;}
  .storybook-mobile-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:14px;
    background:#fff7e6;
  }
  .storybook-mobile-nav a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:10px 12px;
    border:1px solid rgba(72,49,103,.14);
    border-radius:999px;
    background:#fff;
    box-shadow:0 5px 12px rgba(61,38,84,.1);
    color:#453071;
    font-family:var(--font-display);
    font-size:.95rem;
    font-weight:800;
    text-align:center;
    text-decoration:none;
  }
}
@media(max-width:430px){
  .storybook-mobile-nav{grid-template-columns:1fr 1fr;}
}
@media(prefers-reduced-motion:reduce){.hero-hotspot{transition:none;}}
.home-page{ background:#fffaf1; }
.home-page .site-header{ position:relative; background:#fffaf1; }
.home-page .nav-wrap{ max-width:1240px; }
.nav-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:126px; padding:9px 16px; border-radius:18px; background:#ffe47d; color:#5b397e; font-family:var(--font-display); font-size:.78rem; font-weight:800; line-height:1.05; text-align:center; box-shadow:0 8px 18px rgba(107,63,160,.10); }
.home-hero{ overflow:hidden; padding:54px 0 38px; background:radial-gradient(circle at 76% 35%,rgba(53,183,190,.16),transparent 22rem),radial-gradient(circle at 94% 10%,rgba(246,200,75,.24),transparent 18rem),linear-gradient(180deg,#fffaf1,#fff8ee); }
.home-hero-grid{ display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:18px; min-height:470px; }
.home-hero-copy{ padding:20px 0 20px 14px; z-index:2; }
.home-hero-copy h1{ font-size:clamp(3rem,6vw,5rem); line-height:.95; margin-bottom:24px; letter-spacing:-.025em; }
.home-hero-copy h1 span{ color:var(--tangerine); }
.home-hero-copy p{ color:#62536f; font-size:1.08rem; }
.home-hero-art{ position:relative; min-height:450px; display:flex; align-items:flex-end; justify-content:center; }
.hero-soft-blob{ position:absolute; width:88%; height:88%; left:8%; bottom:1%; border-radius:45% 55% 62% 38% / 42% 48% 52% 58%; background:linear-gradient(150deg,#d5f4ef,#fff1d4); transform:rotate(-3deg); }
.home-hero-art>img{ position:relative; z-index:2; width:min(720px,96%); max-height:500px; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 25px 30px rgba(70,45,90,.16)); }
.doodle-note{ position:absolute; z-index:3; font-family:var(--font-display); font-weight:800; line-height:1.05; color:#225d91; text-align:center; }
.note-blue{ right:22%; top:12%; font-size:1.45rem; transform:rotate(-5deg); }
.note-yellow{ right:-2%; top:18%; padding:18px 20px; background:#ffe684; border-radius:24px 18px 28px 19px; font-size:1.03rem; color:#24578e; transform:rotate(6deg); box-shadow:0 14px 25px rgba(70,45,90,.08); }
.home-brave{ padding:58px 0 42px; color:white; overflow:hidden; background:radial-gradient(circle at 78% 26%,rgba(255,255,255,.14),transparent 16rem),linear-gradient(110deg,#2dadb7,#36c3c5); }
.home-brave-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; }
.home-brave-copy h2{ color:white; font-size:clamp(2.7rem,5vw,4.2rem); margin-bottom:16px; }
.home-brave-copy p{ color:rgba(255,255,255,.95); font-size:1.04rem; }
.home-brave-art{ position:relative; min-height:360px; display:flex; align-items:flex-end; justify-content:center; }
.home-brave-art img{ max-height:380px; width:auto; filter:drop-shadow(0 18px 22px rgba(22,82,90,.22)); }
.chalk-note{ position:absolute; right:2%; top:22%; color:#155b86; font-family:var(--font-display); font-size:1.35rem; font-weight:800; line-height:1.05; text-align:center; transform:rotate(-7deg); padding:22px 24px; border-radius:48% 52% 47% 53%; background:rgba(225,249,247,.66); box-shadow:0 0 0 8px rgba(255,255,255,.08); }
.home-ideas{ padding:54px 0 38px; background:radial-gradient(circle at 95% 14%,rgba(246,200,75,.15),transparent 16rem),#fffaf1; }
.home-section-intro{ max-width:850px; margin-bottom:32px; }
.home-section-intro h2{ font-size:clamp(2.2rem,4vw,3.4rem); }
.home-section-intro h2 span{ color:var(--tangerine); }
.home-section-intro p{ color:#695b74; max-width:78ch; }
.home-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.home-card{ position:relative; background:white; border-radius:24px; padding:28px 26px 24px; box-shadow:0 18px 40px rgba(74,48,100,.10); border:1px solid rgba(74,48,100,.05); }
.home-card h3{ font-size:1.35rem; }
.home-card p{ color:#685b74; font-size:.95rem; }
.home-card-icon{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; margin-bottom:12px; font-family:var(--font-display); font-weight:900; }
.home-card-icon.teal{ background:#bceef0; color:#178a96; font-size:.55rem; letter-spacing:-1px; }
.home-card-icon.coral{ background:#ffd5df; color:#c94b79; font-size:1.5rem; }
.home-card-icon.sun{ background:#ffe69a; color:#dc9612; font-size:1.55rem; }
.home-family{ padding:36px 0 58px; background:radial-gradient(circle at 12% 96%,rgba(53,183,190,.14),transparent 18rem),radial-gradient(circle at 82% 25%,rgba(246,200,75,.16),transparent 17rem),#fffaf1; }
.family-heading-row{ position:relative; display:flex; justify-content:space-between; gap:25px; align-items:flex-end; margin-bottom:26px; }
.family-heading-row h2{ font-size:clamp(2rem,4vw,3rem); }
.family-heading-row p{ color:#695b74; }
.family-note{ position:relative; flex:0 0 205px; padding:16px 18px; border-radius:22px 16px 25px 18px; background:#ffe57d; color:#24578e; font-size:1rem; transform:rotate(4deg); }
.home-char-strip{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.home-char-strip .char-chip{ padding:18px 10px 16px; border-radius:20px; min-width:0; }
.home-char-strip .char-chip img{ height:135px; }
.home-char-strip .role{ font-size:.78rem; line-height:1.15; }
.family-cta{ margin-top:24px !important; }
.home-wobblewood{ padding:54px 0 34px; color:white; overflow:hidden; background:radial-gradient(circle at 76% 45%,rgba(245,195,54,.13),transparent 18rem),linear-gradient(110deg,#33204f,#563279 55%,#39235b); }
.home-wobblewood::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 12% 35%,rgba(70,183,167,.12),transparent 16rem); pointer-events:none; }
.home-wobblewood-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:28px; align-items:center; }
.home-wobblewood-copy{ position:relative; z-index:2; }
.home-wobblewood-copy h2{ color:white; font-size:clamp(2.8rem,5vw,4.2rem); }
.home-wobblewood-copy p{ color:rgba(255,255,255,.9); }
.home-wobblewood-art{ position:relative; min-height:390px; display:flex; align-items:flex-end; justify-content:center; }
.home-wobblewood-art>img{ max-height:420px; width:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 24px 28px rgba(10,4,18,.32)); }
.wood-sign{ position:absolute; right:-12px; top:35px; display:flex; flex-direction:column; gap:7px; transform:rotate(-2deg); }
.wood-sign span{ display:block; min-width:115px; padding:8px 13px; background:#c98c57; color:#4a274e; font-family:var(--font-display); font-weight:800; text-align:center; border-radius:4px; box-shadow:0 4px 0 #845b3c; }
.home-story-promise{ padding:50px 0 46px; background:radial-gradient(circle at 20% 100%,rgba(89,172,161,.15),transparent 18rem),radial-gradient(circle at 88% 30%,rgba(246,200,75,.15),transparent 15rem),#f8f4e9; }
.story-promise-inner{ position:relative; max-width:1180px; text-align:center; }
.story-promise-inner>div{ max-width:720px; margin:0 auto; }
.story-promise-inner h2{ font-size:clamp(2rem,4vw,3rem); }
.story-promise-inner p{ margin-left:auto; margin-right:auto; color:#695b74; }
.centered{ justify-content:center; }
.small-steps{ left:0; top:10px; padding:16px; background:#ffe57d; border-radius:24px 18px; color:#24578e; transform:rotate(-5deg); font-size:1rem; }
.braver-together{ right:0; top:28px; color:#24578e; font-size:1.15rem; transform:rotate(5deg); }
.home-page .site-footer{ background:linear-gradient(120deg,#3f275e,#553277); }
@media(max-width:1050px){ .nav-badge{display:none;} .home-char-strip{grid-template-columns:repeat(3,1fr);} .home-char-strip .char-chip img{height:150px;} .note-yellow{right:0;top:5%;} }
@media(max-width:820px){ .home-hero-grid,.home-brave-grid,.home-wobblewood-grid{grid-template-columns:1fr;} .home-hero-copy{text-align:center;padding-left:0;} .home-hero-copy p{margin-left:auto;margin-right:auto;} .home-hero-copy .hero-ctas{justify-content:center;} .home-hero-art{min-height:390px;} .home-hero-art>img{max-height:420px;} .home-brave-copy{text-align:center;} .home-brave-copy p{margin-left:auto;margin-right:auto;} .home-brave-art{min-height:330px;} .home-wobblewood-copy{text-align:center;} .home-wobblewood-copy p{margin-left:auto;margin-right:auto;} .home-cards{grid-template-columns:1fr;} .family-heading-row{display:block;} .family-note{display:none;} .small-steps,.braver-together{display:none;} }
@media(max-width:560px){ .home-hero{padding-top:30px;} .home-hero-grid{min-height:auto;} .home-hero-art{min-height:300px;} .home-hero-art>img{max-height:320px;} .note-blue,.note-yellow{display:none;} .home-brave{padding-top:44px;} .chalk-note{font-size:1rem; right:0; top:12%;} .home-char-strip{grid-template-columns:repeat(2,1fr);} .home-char-strip .char-chip img{height:130px;} .home-wobblewood-art{min-height:300px;} .wood-sign{display:none;} }


/* V5 Wobblewood family portrait */
.home-wobblewood-art > img {
  width: 100%;
  max-width: 720px;
  height: auto;
  object-fit: contain;
  border-radius: 28px;
  box-shadow: 0 18px 45px rgba(28, 15, 55, .22);
}