:root {
  --ink: #342534;
  --plum: #4d2f43;
  --berry: #87536f;
  --rose: #c67b83;
  --coral: #e99a83;
  --gold: #e3ad52;
  --cream: #fffaf1;
  --oat: #f4ead9;
  --leaf: #667b5c;
  --white: #fff;
  --shadow: 0 24px 70px rgba(77,47,67,.16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; font-size: 1rem; line-height: 1.65; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; background: var(--plum); color: white; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 1180px; margin: 0 auto; padding: 1rem 2rem; background: rgba(255,250,241,.9); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(77,47,67,.1); }
.wordmark { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font-family: Nunito, sans-serif; font-size: 1.1rem; font-weight: 800; }
.leaf-mark { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 55% 45% 55% 25%; color: white; background: var(--plum); transform: rotate(-8deg); }
.leaf-mark::first-letter { transform: rotate(8deg); }
.tm { font-size: .42em; vertical-align: super; font-style: normal; }
nav { display: flex; align-items: center; gap: 1.6rem; }
nav a { text-decoration: none; font-size: .93rem; font-weight: 600; }
nav a:hover, nav a:focus-visible { color: var(--berry); }
.nav-cta { border: 1px solid var(--plum); border-radius: 999px; padding: .55rem 1rem; }
.menu-button { display: none; border: 1px solid var(--plum); background: transparent; border-radius: 999px; padding: .5rem .85rem; color: var(--plum); font-weight: 700; }
.hero { max-width: 1180px; margin: 0 auto; min-height: 720px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 5rem; padding: 5.5rem 2rem 6rem; overflow: hidden; }
.eyebrow { margin: 0 0 1rem; color: var(--berry); font-size: .78rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
h1,h2,h3 { font-family: Nunito, sans-serif; line-height: 1.08; }
h1 { margin: 0; color: var(--plum); font-size: clamp(3.1rem, 7vw, 5.8rem); letter-spacing: -.055em; }
h1 em { color: var(--rose); font-style: normal; }
.lede { max-width: 640px; margin: 1.7rem 0 0; font-size: clamp(1.08rem, 2vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 3.1rem; padding: .8rem 1.25rem; border-radius: 999px; text-decoration: none; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--plum); color: white; box-shadow: 0 10px 30px rgba(77,47,67,.22); }
.button-secondary { border: 1.5px solid var(--plum); color: var(--plum); }
.hero-art { position: relative; isolation: isolate; min-height: 520px; display: grid; place-items: end center; border-radius: 48% 48% 2rem 2rem; background: #d7cba7 url("assets/kindheart-village-arrival-hero-v2.webp") 44% center / cover no-repeat; box-shadow: var(--shadow); overflow: hidden; }
.hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(52,37,52,.38)); }
.hero-art p { position: absolute; z-index: 4; bottom: 1.25rem; margin: 0; padding: .55rem 1rem; border-radius: 999px; background: rgba(255,250,241,.92); color: var(--plum); font-family: Nunito, sans-serif; font-weight: 800; }
.belief-strip { padding: 2rem; text-align: center; background: var(--plum); color: white; }
.belief-strip p { margin: 0 0 .25rem; opacity: .78; }
.belief-strip div { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 2rem; font-family: Nunito, sans-serif; font-size: clamp(1.25rem,3vw,1.8rem); font-weight: 800; }
.section { max-width: 1180px; margin: 0 auto; padding: 7rem 2rem; }
.section h2 { margin: 0 0 1.3rem; color: var(--plum); font-size: clamp(2.3rem,5vw,4.2rem); letter-spacing: -.035em; }
.section p { max-width: 720px; }
.story { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 6rem; }
.story-visual { display: grid; place-items: center; padding: 2rem; }
.cover-crop { width: min(100%, 390px); aspect-ratio: 1 / 1.35; overflow: hidden; border-radius: .9rem; box-shadow: 18px 20px 0 #4d2f43, var(--shadow); }
.cover-crop img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.story-copy > p { font-size: 1.08rem; }
.story-details { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.8rem 0; }
.story-details span { padding: .45rem .8rem; border-radius: 999px; background: var(--oat); color: var(--plum); font-size: .86rem; font-weight: 700; }
.coming-soon { display: inline-block; margin: 0; padding-bottom: .2rem; color: var(--berry); border-bottom: 2px solid var(--gold); font-weight: 800; }
.read-aloud { display:grid; grid-template-columns:1.08fr .92fr; gap:4.5rem; align-items:start; border-top:1px solid rgba(77,47,67,.12); }
.read-aloud-intro > p:not(.eyebrow) { font-size:1.08rem; }
.audio-card { margin:2rem 0 1.2rem; padding:1.4rem; border:1px solid rgba(77,47,67,.12); border-radius:1.4rem; background:var(--white); box-shadow:0 14px 40px rgba(77,47,67,.1); }
.audio-card > div { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.8rem; }
.audio-card p { margin:0; }
.audio-label { color:var(--berry); font-size:.78rem!important; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.audio-title { color:var(--plum); font-family:Nunito,sans-serif; font-size:1.35rem!important; font-weight:800; }
.audio-card audio { display:block; width:100%; accent-color:var(--plum); }
.transcript { border-radius:1rem; background:var(--oat); }
.transcript summary { cursor:pointer; padding:1rem 1.2rem; color:var(--plum); font-weight:800; }
.transcript summary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.transcript > div { padding:.1rem 1.2rem 1.2rem; }
.transcript p { font-size:.94rem!important; }
.read-aloud-steps { display:grid; gap:1rem; }
.read-aloud-steps article { display:grid; grid-template-columns:auto 1fr; gap:1rem; padding:1.5rem; border:1px solid rgba(77,47,67,.1); border-radius:1.3rem; background:rgba(244,234,217,.58); }
.read-aloud-steps h3 { margin:.05rem 0 .35rem; color:var(--plum); font-size:1.25rem; }
.read-aloud-steps p { margin:0; }
.step-number { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--plum); color:var(--white); font-family:Nunito,sans-serif; font-weight:800; }
.read-aloud-steps .affirmation-card { background:var(--berry); color:var(--white); }
.affirmation-card h3 { color:var(--white); }
.affirmation-card .step-number { background:var(--white); color:var(--plum); }
.purpose { border-radius: 3rem; background: var(--oat); }
.section-heading { max-width: 830px; margin: 0 auto 3rem; text-align: center; }
.section-heading p { margin-inline: auto; }
.audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; }
.audience-grid article { padding: 2rem; border: 1px solid rgba(77,47,67,.1); border-radius: 1.4rem; background: rgba(255,255,255,.67); }
.audience-grid article > span { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--plum); color: white; font-size: 1.25rem; }
.audience-grid h3 { margin: 1.1rem 0 .5rem; font-size: 1.35rem; }
.audience-grid p { margin: 0; }
.characters { border-top:1px solid rgba(77,47,67,.12); }
.character-heading { margin-bottom:2rem; }
.character-selector { display:flex; justify-content:center; flex-wrap:wrap; gap:.65rem; margin-bottom:1.5rem; }
.character-tab { min-height:2.75rem; padding:.6rem 1rem; border:1px solid rgba(77,47,67,.24); border-radius:999px; background:transparent; color:var(--plum); font:700 .92rem "DM Sans",sans-serif; cursor:pointer; }
.character-tab:hover,.character-tab:focus-visible { border-color:var(--plum); outline:none; }
.character-tab.active { background:var(--plum); color:var(--white); border-color:var(--plum); }
.character-stage { display:grid; grid-template-columns:.9fr 1.1fr; gap:4.5rem; align-items:center; min-height:620px; padding:2.2rem; border:1px solid rgba(77,47,67,.1); border-radius:2.5rem; background:linear-gradient(135deg,rgba(244,234,217,.88),rgba(255,255,255,.8)); box-shadow:0 18px 55px rgba(77,47,67,.1); }
.character-gallery { position:relative; display:grid; width:min(100%,390px); margin:0 auto; }
.full-view { width:100%; aspect-ratio:2 / 3; overflow:hidden; border-radius:1.8rem; background:#2f1c29; box-shadow:var(--shadow); }
.character-gallery img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; transition:opacity .35s ease; }
.character-copy h3 { margin:.2rem 0 1rem; color:var(--plum); font-size:clamp(2.4rem,5vw,4.5rem); }
.character-role { margin:0; color:var(--berry); font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.character-copy > p:not(.character-role):not(.character-note) { font-size:1.1rem; }
.character-gift { margin-top:1.5rem; padding:1.35rem 1.5rem; border-left:5px solid var(--gold); border-radius:0 1.2rem 1.2rem 0; background:white; }
.character-gift span { color:var(--berry); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.character-gift p { margin:.35rem 0 0; color:var(--plum); font-family:Nunito,sans-serif; font-size:1.18rem; font-weight:800; line-height:1.4; }
.character-note { margin-top:1.1rem; color:#705f69; font-size:.82rem; }
.world { max-width:none; padding-left:max(2rem,calc((100vw - 1180px)/2 + 2rem)); padding-right:max(2rem,calc((100vw - 1180px)/2 + 2rem)); background:var(--plum); color:white; }
.world h2 { color:white; }
.world .eyebrow { color:#f6c8b0; }
.world-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.world-grid article { padding:2rem; border:1px solid rgba(255,255,255,.16); border-radius:1.5rem; background:rgba(255,255,255,.08); }
.world-grid h3 { margin:1rem 0 .65rem; color:white; font-size:1.5rem; }
.world-grid p { margin:.5rem 0; color:#f7edf1; }
.world-symbol { display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:var(--gold); color:var(--plum); font-size:1.3rem; }
.lights-card { background:rgba(227,173,82,.14)!important; }
.world-truth { padding-top:.8rem; border-top:1px solid rgba(255,255,255,.18); font-weight:700; }
blockquote { margin: 0; padding: 2.6rem; border-radius: 2rem 2rem 2rem .5rem; background: var(--berry); color: white; font-family: Nunito,sans-serif; font-size: clamp(1.35rem,3vw,2rem); font-weight: 700; line-height: 1.35; box-shadow: var(--shadow); }
blockquote cite { display: block; margin-top: 1.4rem; color: #f8dfce; font-family: "DM Sans",sans-serif; font-size: .83rem; font-style: normal; font-weight: 500; }
.founder { display: grid; grid-template-columns: .5fr 1.5fr; align-items: center; gap: 4rem; border-top: 1px solid rgba(77,47,67,.12); }
.founder-monogram { width: min(100%, 280px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50% 50% 50% 18%; background: linear-gradient(135deg,var(--coral),var(--berry)); box-shadow: var(--shadow); }
.founder-monogram span { color: white; font-family: Nunito,sans-serif; font-size: 4rem; font-weight: 800; }
.gentle-link { display:inline-flex; gap:.5rem; align-items:center; margin-top:1rem; color:var(--plum); font-weight:800; text-underline-offset:.28rem; }
.gregory { display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center; border-radius:3rem; background:linear-gradient(145deg,#f1e6d5 0%,#fffaf1 62%,#edf1e8 100%); }
.dedication-card { padding:1rem 0 1rem 1rem; }
.dedication-line { margin:0 0 .3rem; color:var(--berry); font-family:Nunito,sans-serif; font-size:1.1rem; font-weight:700; }
.gregory h2 { font-size:clamp(2.5rem,5vw,4.35rem); }
.standards-list { display:grid; gap:.75rem; }
.standards-list article { display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; padding:1rem 1.1rem; border:1px solid rgba(77,47,67,.1); border-radius:1.1rem; background:rgba(255,255,255,.78); }
.standards-list article span { display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:50%; background:var(--plum); color:white; font:800 .75rem Nunito,sans-serif; }
.standards-list article p { margin:.12rem 0 0; line-height:1.45; }
.standards-note { margin:.45rem 0 0; color:#705f69; font-size:.82rem; }
.needed { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; border-radius:3rem; background:linear-gradient(145deg,#edf1e8 0%,#f8efe2 100%); }
.needed-intro { padding:1rem 1.5rem 1rem 0; }
.needed-intro h2 { max-width:620px; }
.needed-lede { color:var(--plum); font-family:Nunito,sans-serif; font-size:1.3rem; font-weight:800; }
.needed-affirmation { margin-top:1.5rem; color:var(--plum); font-family:Nunito,sans-serif; font-size:clamp(1.25rem,2.6vw,1.75rem); font-weight:800; line-height:1.35; }
.caregiver-card { padding:2.2rem; border:1px solid rgba(77,47,67,.1); border-radius:2rem 2rem 2rem .65rem; background:rgba(255,255,255,.8); box-shadow:0 16px 45px rgba(77,47,67,.1); }
.caregiver-card h3 { margin:0 0 1rem; color:var(--plum); font-size:clamp(1.65rem,3vw,2.25rem); }
.caregiver-card p { margin:.8rem 0; }
.caregiver-affirmation { padding-top:.8rem; border-top:2px solid rgba(227,173,82,.5); color:var(--berry); font-weight:800; }
.support-card { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:2rem; margin-top:1.25rem; padding:1.8rem 2rem; border-left:6px solid var(--gold); border-radius:1.2rem; background:var(--white); box-shadow:0 12px 36px rgba(77,47,67,.08); }
.support-card h3 { margin:.1rem 0 .45rem; color:var(--plum); font-size:1.55rem; }
.support-card p { margin:0; }
.support-kicker { color:var(--berry); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.support-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; flex:0 0 auto; }
.support-actions .button { min-height:2.8rem; padding:.65rem 1rem; }
.support-link { color:var(--plum); font-weight:800; text-underline-offset:.22rem; }
.support-note { grid-column:1 / -1; max-width:none!important; margin:.2rem 0 0; color:#665660; font-size:.88rem; }
.experience { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; }
.experience-action { padding:2rem; border:1px solid rgba(77,47,67,.12); border-radius:1.5rem; background:var(--oat); }
.experience-action p { margin-top:0; }
.connect { max-width: none; text-align: center; background: var(--plum); color: white; }
.connect .eyebrow { color: #f6c8b0; }
.connect h2 { max-width: 900px; margin-inline: auto; color: white; }
.connect p { margin-inline: auto; }
.social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin: 2rem 0; }
.social-links a { padding: .6rem 1rem; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; text-decoration: none; font-weight: 700; }
.social-links a:hover { background: white; color: var(--plum); }
.button-light { background: white; color: var(--plum); }
footer { max-width: 1180px; margin: 0 auto; padding: 3rem 2rem; text-align: center; }
footer .wordmark { justify-content: center; }
footer p { margin: .7rem auto 0; }
.legal { max-width: 800px; color: #705f69; font-size: .78rem; }
.footer-standard-link { color:var(--plum); font-weight:800; text-underline-offset:.25rem; }
@media (max-width: 850px) {
  .site-header { padding: .85rem 1rem; }
  .menu-button { display: block; }
  nav { position: absolute; top: 100%; left: 1rem; right: 1rem; display: none; flex-direction: column; align-items: stretch; padding: 1rem; border-radius: 1rem; background: var(--cream); box-shadow: var(--shadow); }
  nav.open { display: flex; }
  nav a { padding: .6rem; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 3rem; padding-top: 4rem; }
  .hero-art { min-height: 440px; }
  .story, .read-aloud, .character-stage, .founder, .gregory, .needed, .experience { grid-template-columns: 1fr; gap: 3rem; }
  .needed-intro { padding-right:0; }
  .support-card { flex-direction:column; align-items:flex-start; }
  .character-gallery { width:min(100%,390px); margin:0 auto; }
  .world-grid { grid-template-columns:1fr; }
  .story-visual { order: 2; }
  .audience-grid { grid-template-columns: 1fr; }
  .purpose { border-radius: 2rem; }
  .founder-monogram { width: 180px; }
}
@media (max-width: 500px) {
  .wordmark { font-size: .96rem; }
  .hero, .section { padding-left: 1.2rem; padding-right: 1.2rem; }
  .hero { padding-top: 3rem; }
  h1 { font-size: clamp(2.75rem,15vw,4rem); }
  .hero-art { min-height: 380px; }
  .belief-strip div { flex-direction: column; gap: .15rem; }
  .section { padding-top: 5rem; padding-bottom: 5rem; }
  blockquote { padding: 2rem; }
  .character-stage { padding:1.2rem; border-radius:1.7rem; }
  .character-gallery { width:min(100%,350px); }
  .gregory { border-radius:2rem; }
  .dedication-card { padding-left:0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition-duration: .01ms !important; }
}