@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Patrick+Hand&display=swap');

:root{
  --ink:#274633;
  --ink-soft:#526b58;
  --paper:#fff4dc;
  --paper-deep:#f3dfb8;
  --garden:#dfe9c7;
  --leaf:#5f8b54;
  --leaf-dark:#366744;
  --blue:#5b94a4;
  --orange:#d9793f;
  --rose:#d99083;
  --card:#fff9e9;
  --line:rgba(39,70,51,.24);
  --shadow:0 12px 0 rgba(75,83,54,.12), 0 20px 36px rgba(75,83,54,.14);
  --serif:"Fraunces", Georgia, serif;
  --sans:"DM Sans", Arial, sans-serif;
  --hand:"Patrick Hand", "Comic Sans MS", cursive;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  background:
    radial-gradient(rgba(39,70,51,.055) .8px, transparent .8px),
    linear-gradient(180deg,#fff6e5 0%,#f5e7c9 55%,#e8e0b7 100%);
  background-size:9px 9px, auto;
}
a{color:inherit}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.035em;line-height:1.04}
h1{font-size:clamp(3.1rem,7vw,7rem)}
h2{font-size:clamp(2.15rem,4.5vw,4.6rem)}
h3{font-size:1.45rem}
img,svg{max-width:100%}
button,input,textarea,select{font:inherit}

.skip-link{position:fixed;z-index:100;top:-60px;left:1rem;background:var(--ink);color:white;padding:.65rem 1rem;border-radius:0 0 14px 14px}
.skip-link:focus{top:0}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px clamp(18px,4vw,64px);
  background:rgba(255,244,220,.92);
  border-bottom:2px dashed rgba(39,70,51,.18);
  backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-weight:700;line-height:.95}
.brand em{font-style:normal;color:var(--leaf-dark)}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border:3px solid var(--leaf-dark);border-radius:50% 50% 46% 54%;font:2rem var(--hand);background:#e5f1d2;color:var(--leaf-dark)}
.site-nav{display:flex;align-items:center;gap:clamp(10px,1.7vw,24px)}
.site-nav a{font:.82rem var(--hand);font-size:clamp(.82rem,1.2vw,1.08rem);text-decoration:none;white-space:nowrap;position:relative}
.site-nav a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:99px;background:var(--orange);transform:scaleX(0);transition:transform .2s}
.site-nav a:hover:after,.site-nav a:focus-visible:after,.site-nav a[aria-current="page"]:after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{color:var(--orange)}
.menu-toggle{display:none;border:2px solid var(--ink);background:#fff9e9;border-radius:999px;padding:8px 14px;color:var(--ink);font:700 .9rem var(--sans)}

.section-band{position:relative;overflow:hidden;padding:clamp(66px,9vw,128px) clamp(18px,6vw,96px)}
.garden-band{background:linear-gradient(180deg,#f9edcf 0%,#e7edca 42%,#d7e5bd 100%)}
.paper-band{background:var(--paper)}
.mint-band{background:#e2edd0}
.peach-band{background:#f4d6ae}
.blue-band{background:#d6e6e4}
.story-band{background:#efdcae}
.section-heading{max-width:900px;margin:0 auto 44px;text-align:center}
.section-heading.left{text-align:left;margin-inline:0}
.section-heading.narrow{max-width:760px}
.scribble{font-family:var(--hand);font-size:1.55rem;color:var(--orange);margin-bottom:4px}
.lede{font-size:clamp(1.08rem,1.55vw,1.42rem);max-width:680px}
.lede-small{font-size:1.12rem}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:2px solid var(--ink);border-radius:999px;padding:12px 20px;background:#fff9e9;text-decoration:none;font-weight:800;box-shadow:0 5px 0 rgba(39,70,51,.16);transition:transform .18s,box-shadow .18s}
.button:hover,.button:focus-visible{transform:translateY(-3px) rotate(-1deg);box-shadow:0 9px 0 rgba(39,70,51,.15)}
.button-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.button-orange{background:var(--orange);color:#fff;border-color:#9a4d27}
.centered{display:flex;width:max-content;margin:0 auto}

/* Homepage café garden */
.garden-hero{min-height:calc(100vh - 70px);padding-top:clamp(38px,5vw,64px)}
.garden-hero:before,.garden-hero:after{content:"";position:absolute;pointer-events:none}
.garden-hero:before{inset:auto -4% -90px -4%;height:260px;background:radial-gradient(ellipse at center,#b7d593 0 58%,transparent 59%)}
.garden-hero:after{right:2%;top:88px;width:190px;height:105px;border:8px solid #8a5c38;border-radius:9px;background:#d8b17b;box-shadow:0 7px 0 rgba(39,70,51,.16);transform:rotate(3deg)}
.garden-intro{position:relative;z-index:2;max-width:680px;margin-bottom:10px}
.garden-intro h1{margin-bottom:14px;color:#214f33;text-shadow:1px 2px #f4d9a7}
.memory-line{font:1.45rem/1.1 var(--hand);max-width:470px;background:#fff7e4;border-left:5px solid var(--orange);padding:10px 14px;border-radius:12px;box-shadow:0 5px 0 rgba(39,70,51,.08)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.garden-scene{position:relative;z-index:1;max-width:1320px;min-height:680px;margin:0 auto}
.cafe-backdrop{position:absolute;right:7%;top:0;width:390px;height:250px;border:9px solid rgba(99,72,44,.65);border-radius:20px;background:linear-gradient(135deg,rgba(128,157,110,.3),rgba(245,213,151,.55)),linear-gradient(90deg,#6c9aa2 0 26%,transparent 26% 100%);box-shadow:var(--shadow)}
.cafe-backdrop:before{content:"Welcome to our Garden Café";position:absolute;right:-48px;top:-64px;width:172px;padding:16px 12px;border:3px solid #765033;border-radius:10px;background:#d7b27d;font:1.35rem/1 var(--hand);text-align:center;transform:rotate(3deg)}
.cafe-backdrop:after{content:"";position:absolute;left:38px;right:38px;top:22px;height:6px;background:repeating-linear-gradient(90deg,#294632 0 8px,#edb64b 8px 16px);border-radius:999px}
.garden-path{position:absolute;left:17%;right:12%;top:205px;bottom:60px;border-radius:52% 46% 42% 50%;background:radial-gradient(circle at 52% 20%,rgba(255,250,232,.76),rgba(234,211,160,.58) 54%,rgba(199,214,155,.18) 55%);border:2px dashed rgba(104,86,54,.25)}
.footprints{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse,#8b7a58 0 45%,transparent 48%) 30% 56%/18px 28px,
  radial-gradient(ellipse,#8b7a58 0 45%,transparent 48%) 37% 48%/18px 28px,
  radial-gradient(ellipse,#8b7a58 0 45%,transparent 48%) 46% 59%/18px 28px,
  radial-gradient(ellipse,#8b7a58 0 45%,transparent 48%) 55% 50%/18px 28px,
  radial-gradient(ellipse,#8b7a58 0 45%,transparent 48%) 64% 60%/18px 28px;
  background-repeat:no-repeat;opacity:.4}

.elephant-host{position:absolute;left:42%;top:18%;width:270px;height:300px;transform:translateX(-50%);filter:drop-shadow(0 12px 0 rgba(39,70,51,.12))}
.elephant-body{position:absolute;left:35px;bottom:0;width:210px;height:190px;background:#9db09d;border:4px solid rgba(39,70,51,.28);border-radius:48% 48% 42% 42%;box-shadow:inset -20px -8px rgba(74,97,78,.14)}
.elephant-head{position:absolute;left:44px;top:22px;width:190px;height:160px;background:#c6c1b4;border:4px solid rgba(39,70,51,.25);border-radius:46%}
.elephant-head:before,.elephant-head:after{content:"";position:absolute;top:26px;width:82px;height:104px;background:#c9c2b5;border:4px solid rgba(39,70,51,.2);border-radius:50%;z-index:-1}
.elephant-head:before{left:-53px;transform:rotate(-15deg);box-shadow:inset -12px -8px #dda696}
.elephant-head:after{right:-53px;transform:rotate(15deg);box-shadow:inset 12px -8px #dda696}
.elephant-eye{position:absolute;top:58px;width:15px;height:19px;border-radius:50%;background:#1f2f2a;box-shadow:inset 4px 3px #fff}
.elephant-eye.left{left:62px}.elephant-eye.right{right:62px}
.trunk{position:absolute;left:85px;top:82px;width:42px;height:108px;border:4px solid rgba(39,70,51,.18);border-top:0;background:#c6c1b4;border-radius:0 0 28px 28px;transform-origin:top;transform:rotate(-16deg)}
.trunk:after{content:"";position:absolute;left:-16px;bottom:-18px;width:48px;height:36px;border:10px solid #c6c1b4;border-top:0;border-right:0;border-radius:0 0 0 28px}
.smile{position:absolute;left:80px;top:107px;width:34px;height:18px;border-bottom:4px solid #6b5744;border-radius:50%}
.hat{position:absolute;left:74px;top:-18px;width:105px;height:52px;background:#d59a42;border:3px solid rgba(39,70,51,.22);border-radius:48% 48% 12px 12px;transform:rotate(-8deg)}
.scarf{position:absolute;left:70px;top:169px;width:136px;height:28px;background:#c66d3f;border-radius:999px;transform:rotate(3deg)}
.scarf:after{content:"";position:absolute;right:12px;top:17px;width:38px;height:78px;background:#c66d3f;border-radius:0 0 14px 14px;transform:rotate(-8deg)}
.host-mug{position:absolute;right:18px;top:170px;width:58px;height:50px;border:4px solid #8a5c38;border-radius:8px 8px 14px 14px;background:#fff7e3}
.host-mug:after{content:"";position:absolute;right:-20px;top:10px;width:21px;height:20px;border:4px solid #8a5c38;border-left:0;border-radius:0 12px 12px 0}

.scene-link{position:absolute;z-index:4;display:block;text-decoration:none;color:var(--ink);outline:none;transform-origin:center;transition:transform .18s}
.scene-link:hover,.scene-link:focus-visible{transform:translateY(-4px) rotate(-1.5deg)}
.scene-link:focus-visible .object-label{outline:4px solid rgba(91,148,164,.45);outline-offset:5px}
.object-label{display:block;width:max-content;max-width:210px;margin:8px auto 0;padding:8px 14px;border:2px solid rgba(80,57,35,.45);border-radius:10px;background:#efe0b7;box-shadow:0 5px 0 rgba(39,70,51,.14);font:1.55rem/1 var(--hand);text-align:center}
.object-hint{display:block;width:max-content;max-width:190px;margin:5px auto 0;padding:5px 11px;border-radius:999px;background:#fff9e9;font:1rem/1 var(--hand);opacity:.96}
.scene-link:hover .object-hint,.scene-link:focus-visible .object-hint{background:#fff1c9}
.scene-mugs{right:18%;top:220px}.scene-box{left:9%;top:240px}.scene-finds{left:33%;bottom:108px}.scene-plant{right:1%;top:285px}.scene-boots{left:5%;bottom:95px}.scene-books{right:27%;bottom:92px}.scene-note{right:5%;bottom:90px}

.obj{position:relative;display:block;margin:auto}
.obj.mug{width:116px;height:90px;border:7px solid #355e6b;border-radius:14px 14px 25px 25px;background:#78a8b2;box-shadow:inset 0 -18px rgba(255,255,255,.2)}
.obj.mug:before{content:"";position:absolute;right:-35px;top:20px;width:32px;height:34px;border:7px solid #355e6b;border-left:0;border-radius:0 20px 20px 0}
.obj.mug:after{content:"⌁";position:absolute;left:42px;top:-48px;font:3rem var(--hand);color:#fff}
.obj.box{width:170px;height:104px;background:#bd8a51;border:4px solid #7a5634;border-radius:8px;box-shadow:inset 0 20px #d2a368}
.obj.box:before{content:"";position:absolute;left:20px;top:-42px;width:124px;height:62px;background:linear-gradient(90deg,#7f9a67 0 20%,#d87545 20% 38%,#486b8c 38% 56%,#dfc070 56% 78%,#805c3f 78% 100%);clip-path:polygon(0 28%,100% 0,100% 100%,0 100%)}
.obj.finds{width:210px;height:108px}
.obj.finds:before{content:"";position:absolute;left:15px;bottom:8px;width:78px;height:68px;border:7px solid #95683c;background:#d8e6d4;transform:rotate(-8deg)}
.obj.finds:after{content:"◴";position:absolute;right:10px;bottom:0;width:70px;height:70px;border:5px solid #8b633b;border-radius:50%;background:#f4dfb6;font:3.1rem/1.25 var(--hand);text-align:center}
.chess{position:absolute;left:83px;bottom:2px;width:78px;height:70px;background:repeating-conic-gradient(#2d3d31 0 25%,#f5dfb6 0 50%) 50%/28px 28px;border:4px solid #7b5738;transform:rotate(3deg)}
.obj.plant{width:122px;height:160px}
.obj.plant:before{content:"";position:absolute;left:19px;bottom:0;width:86px;height:72px;background:#b46f43;border:4px solid #704627;border-radius:0 0 35px 35px}
.obj.plant:after{content:"";position:absolute;left:55px;bottom:65px;width:14px;height:90px;background:#537a42;border-radius:999px;box-shadow:-28px -14px 0 10px #92b864,28px -32px 0 12px #8bac5b,-10px -68px 0 9px #abc879}
.obj.boots{width:170px;height:98px}
.obj.boots:before,.obj.boots:after{content:"";position:absolute;bottom:0;width:82px;height:88px;background:#875b35;border:4px solid #563923;border-radius:24px 20px 10px 10px;box-shadow:inset 0 -20px #6f462a}
.obj.boots:before{left:0;transform:rotate(-3deg)}.obj.boots:after{right:0;transform:rotate(5deg)}
.obj.books{width:155px;height:126px;background:linear-gradient(#587d72 0 24%,#d5ab45 24% 31%,#2f6373 31% 55%,#f3e0b8 55% 62%,#9a5f4a 62% 84%,#f3e0b8 84%);border-radius:8px;box-shadow:0 12px 0 rgba(39,70,51,.12)}
.obj.books:after{content:"";position:absolute;left:50px;top:-32px;width:60px;height:48px;border:4px solid #765033;border-radius:50% 50% 10px 10px;background:#cfd9a3}
.obj.note{width:170px;height:118px;background:#fff9e9;border:4px solid #93633e;border-radius:12px;transform:rotate(2deg);box-shadow:8px 8px 0 #d2a368}
.obj.note:before{content:"✎";position:absolute;right:-26px;top:20px;font:5rem var(--hand);color:#315e6c;transform:rotate(30deg)}
.obj.note:after{content:"♡";position:absolute;left:65px;top:32px;font:2.5rem var(--hand);color:var(--rose)}

.mission-strip{position:relative;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1180px;margin:12px auto 0;padding:24px;border:2px dashed rgba(39,70,51,.25);border-radius:28px;background:rgba(255,249,233,.86)}
.mission-step{display:flex;align-items:center;gap:12px;font-weight:700}
.mission-step span{display:grid;place-items:center;flex:0 0 54px;height:54px;border-radius:50%;background:#587f51;color:#fff;font:2rem var(--hand)}

/* Reusable page worlds */
.page-hero{min-height:430px;display:grid;grid-template-columns:1fr .72fr;align-items:center;gap:36px}
.page-hero .section-heading{margin:0;text-align:left}
.object-stage{position:relative;min-height:260px}
.object-stage:before{content:"";position:absolute;inset:auto 3% 0 3%;height:86px;background:rgba(255,249,233,.65);border-radius:50%;border:2px dashed var(--line)}
.stage-elephant{position:absolute;right:7%;bottom:36px;width:150px;height:130px}
.stage-elephant:before{content:"";position:absolute;inset:28px 18px 0 0;background:#bdb7ab;border:3px solid var(--line);border-radius:48%}
.stage-elephant:after{content:"";position:absolute;left:84px;top:65px;width:38px;height:58px;border:8px solid #bdb7ab;border-top:0;border-left:0;border-radius:0 0 28px 0}
.stage-object{position:absolute;left:4%;bottom:24px}
.cafe-table,.packing-counter,.shelf-counter,.garden-plant,.boot-trail,.storybook-stack,.stationery-stack{position:relative;width:min(420px,100%);min-height:230px;margin:auto}
.cafe-table:before{content:"";position:absolute;left:4%;right:4%;bottom:46px;height:72px;background:#9a633d;border:4px solid #704627;border-radius:50%;box-shadow:0 36px 0 -18px #704627}
.cafe-table:after{content:"☕ ☕";position:absolute;left:25%;top:28px;font:5rem var(--hand);letter-spacing:30px;color:#5c93a3}
.packing-counter:before{content:"";position:absolute;left:5%;right:5%;bottom:40px;height:92px;background:#c58e55;border:4px solid #765033;border-radius:14px;box-shadow:inset 0 21px #d9aa73}
.packing-counter:after{content:"safe • useful • functional";position:absolute;left:19%;bottom:78px;padding:6px 12px;background:#fff4dc;border:2px solid #765033;border-radius:10px;font:1.2rem var(--hand);transform:rotate(-3deg)}
.shelf-counter:before{content:"";position:absolute;left:0;right:0;bottom:38px;height:150px;background:#6e482d;border:5px solid #9f7044;border-radius:16px;box-shadow:inset 0 63px #996238}
.shelf-counter:after{content:"Shop doors opening soon";position:absolute;left:19%;top:22px;padding:15px;background:#2f3d33;color:#fff3d4;font:1.5rem/1 var(--hand);border-radius:8px;transform:rotate(-3deg)}
.garden-plant:before{content:"";position:absolute;left:38%;bottom:22px;width:98px;height:80px;border-radius:0 0 40px 40px;background:#b76e44;border:4px solid #704627}
.garden-plant:after{content:"";position:absolute;left:50%;bottom:96px;width:14px;height:118px;background:#527c43;border-radius:999px;box-shadow:-44px -18px 0 18px #93bb67,42px -45px 0 20px #87ae5b,-8px -88px 0 16px #b1cd76}
.boot-trail:before{content:"";position:absolute;left:9%;bottom:55px;width:135px;height:92px;background:#865932;border-radius:32px 26px 12px 12px;border:4px solid #563923;box-shadow:118px 18px 0 -5px #865932,118px 18px 0 -1px #563923}
.boot-trail:after{content:"• • • •";position:absolute;right:8%;top:35px;font:4rem var(--hand);color:#856f4f;letter-spacing:10px;transform:rotate(22deg)}
.storybook-stack:before{content:"";position:absolute;left:16%;right:18%;bottom:40px;height:145px;background:linear-gradient(#456f83 0 22%,#f4dfb6 22% 29%,#8f5d4a 29% 55%,#f4dfb6 55% 63%,#557c55 63% 100%);border-radius:12px;box-shadow:0 12px 0 rgba(39,70,51,.14)}
.storybook-stack:after{content:"Small rescues";position:absolute;left:30%;top:32px;padding:10px 14px;background:#fff4dc;border:2px solid #765033;border-radius:12px;font:1.5rem var(--hand);transform:rotate(-4deg)}
.stationery-stack:before{content:"";position:absolute;left:12%;right:12%;bottom:35px;height:150px;background:#fff9e9;border:4px solid #8d623f;border-radius:14px;box-shadow:10px 10px 0 #d0a366;transform:rotate(2deg)}
.stationery-stack:after{content:"Leave us a note";position:absolute;left:28%;top:55px;font:1.7rem var(--hand);color:#315e6c}

.note-panel,.donation-notes,.checker,.support-form,.contact-form,.story-card,.role-card,.care-card{
  background:rgba(255,249,233,.9);
  border:2px solid rgba(91,72,44,.22);
  border-radius:26px;
  box-shadow:var(--shadow);
}
.note-panel{padding:clamp(24px,4vw,42px)}
.split-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,70px);align-items:start;max-width:1160px;margin:0 auto}
.article-board{max-width:980px;margin:0 auto;padding:clamp(26px,5vw,54px);background:#fff9e9;border:3px dashed rgba(39,70,51,.25);border-radius:30px;box-shadow:var(--shadow)}
.article-board .pink{color:#c15f74;font-family:var(--hand);font-size:1.5rem}

.donation-layout{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:1080px;margin:0 auto}
.donation-notes,.checker{padding:clamp(24px,4vw,40px)}
.donation-notes ul{padding-left:1.15rem}
.donation-notes li{margin-bottom:8px}
.rule-tag{display:block;margin-top:10px;padding:10px 12px;background:#f0dcaa;border-radius:12px;font-weight:700}
.checker{display:grid;gap:14px;align-content:start;background:#fff3d2}
label{display:grid;gap:7px;font-weight:800;font-size:.92rem}
input,textarea,select{width:100%;padding:13px 14px;border:2px solid rgba(39,70,51,.32);border-radius:14px;background:#fffdf3;color:var(--ink)}
.checker-result,.form-message{min-height:48px;margin:4px 0 0;padding:12px;border-radius:14px;background:#e3edce;font-weight:700}

.finds{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.link-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.link-buttons a{padding:11px 16px;border:2px solid var(--ink);border-radius:999px;background:#fff9e9;text-decoration:none;font-weight:800;box-shadow:0 5px 0 rgba(39,70,51,.12)}
.link-buttons a:hover,.link-buttons a:focus-visible{background:var(--ink);color:#fff}
.coming-soon{margin-top:26px;max-width:340px;padding:18px;border-radius:20px;background:#fff9e9;border:2px dashed var(--line);text-align:center}
.packing-elephant{position:relative;width:120px;height:72px;margin:0 auto 8px}
.packing-elephant:before{content:"";position:absolute;left:7px;top:18px;width:65px;height:48px;background:#bdb7ab;border-radius:50%;border:2px solid var(--line)}
.packing-elephant:after{content:"";position:absolute;right:8px;bottom:0;width:46px;height:36px;background:#bd8a51;border:2px solid #765033;border-radius:6px;animation:pack 1.5s steps(2,end) infinite}
.loading-dots:after{content:"";animation:dots 1.2s steps(4,end) infinite}

.help{display:grid;grid-template-columns:1fr .88fr;gap:clamp(34px,6vw,90px);align-items:start}
.help-points{margin-top:24px}
.help-points details{padding:15px 0;border-top:2px dashed rgba(39,70,51,.22)}
.help-points details:last-child{border-bottom:2px dashed rgba(39,70,51,.22)}
.help-points summary{font:700 1.2rem var(--serif);cursor:pointer}
.support-form,.contact-form{display:grid;gap:15px;padding:clamp(24px,4vw,42px)}

.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1180px;margin:0 auto 32px}
.role-card{min-height:220px;padding:20px;text-align:center}
.role-card span{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 12px;border-radius:50% 45% 50% 45%;background:#d9b36f;border:2px solid rgba(39,70,51,.2);font:2rem var(--hand)}
.role-card:nth-child(2n) span{background:#adc98d}.role-card:nth-child(3n) span{background:#9fc5c4}
.role-card h2,.story-card h2{font-size:1.35rem;letter-spacing:-.02em}

.story-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;max-width:1180px;margin:0 auto}
.story-card{padding:22px;background:#fff3d2}
.story-icon{display:grid;place-items:center;width:60px;height:60px;border:2px solid var(--ink);border-radius:50%;background:#a9c78d;font:2rem var(--hand);margin-bottom:16px}
.book{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:330px;max-width:720px;margin:42px auto 0;filter:drop-shadow(0 14px 12px rgba(56,74,64,.2))}
.book-page{display:grid;place-items:center;position:relative;padding:44px 30px;background:#fff4d2;min-height:330px;font-family:var(--serif);font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.25;text-align:center}
.left-page{border-radius:18px 0 0 20px;transform:skewY(1deg);border-right:1px solid rgba(39,70,51,.22)}
.right-page{border-radius:0 18px 20px 0;transform:skewY(-1deg)}
.book-spine{position:absolute;z-index:2;left:50%;top:0;bottom:0;width:12px;background:linear-gradient(90deg,rgba(39,70,51,.18),transparent,rgba(39,70,51,.14));transform:translateX(-50%)}
.page-number{position:absolute;top:14px;font:1rem var(--hand)}
.left-page .page-number{left:18px}.right-page .page-number{right:18px}
.corner{position:absolute;z-index:4;bottom:0;width:70px;height:60px;border:0;background:transparent;color:var(--ink);font:3.5rem/.9 var(--hand);cursor:pointer}
.corner-back{left:0}.corner-next{right:0}
.corner:hover,.corner:focus-visible{color:var(--orange)}
.book-controls{display:flex;justify-content:center;gap:14px;margin-top:18px}
.book-controls button{border:2px solid var(--ink);border-radius:999px;background:#fff9e9;padding:8px 16px;color:var(--ink);font-weight:800;cursor:pointer}
.book.turn-forward .right-page{animation:pageflip .45s ease}
.book.turn-back .left-page{animation:pageflipBack .45s ease}

/* Client-approved homepage correction: the scene is now a real pencil-crayon artwork,
   with editable/accessibile HTML labels positioned over the blank illustrated tags. */
.garden-hero{
  min-height:auto;
  padding:0 0 clamp(34px,5vw,70px);
  background:#f5e9ca;
}
.garden-hero:before,.garden-hero:after{display:none}
.garden-intro{
  position:absolute;
  z-index:8;
  left:clamp(22px,5vw,88px);
  top:clamp(92px,9vw,145px);
  width:min(520px,36vw);
  margin:0;
}
.garden-intro h1{
  font-size:clamp(3rem,5vw,5.9rem);
  line-height:.92;
  color:#264c30;
  margin-bottom:16px;
  text-shadow:1px 2px rgba(255,247,224,.85);
}
.garden-intro .lede{
  max-width:430px;
  color:#bf5e31;
  font:700 clamp(1.15rem,1.5vw,1.55rem)/1.25 var(--serif);
}
.memory-line{
  max-width:430px;
  background:rgba(255,249,232,.86);
  border:0;
  border-left:5px solid var(--orange);
  box-shadow:0 8px 18px rgba(91,72,44,.14);
}
.artwork-scene{
  width:min(1680px,100%);
  aspect-ratio:16/9;
  min-height:auto;
  margin:0 auto;
  background:
    linear-gradient(90deg,rgba(255,245,220,.2),rgba(255,245,220,0) 33%),
    url("assets/elephant-cafe-garden-hero.png") center/cover no-repeat;
  box-shadow:inset 0 -30px 48px rgba(90,103,55,.12);
}
.artwork-scene .cafe-backdrop,
.artwork-scene .garden-path,
.artwork-scene .footprints,
.artwork-scene .elephant-host,
.artwork-scene .obj{display:none}
.artwork-scene .scene-link{
  min-width:150px;
  min-height:58px;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.artwork-scene .object-label{
  margin:0;
  padding:8px 15px 7px;
  color:#264c30;
  background:rgba(240,218,173,.86);
  border:2px solid rgba(116,79,44,.52);
  border-radius:10px;
  box-shadow:0 4px 0 rgba(73,61,34,.17);
  transform:rotate(-1deg);
  font-size:clamp(1.25rem,1.5vw,1.78rem);
  text-shadow:0 1px rgba(255,251,235,.7);
}
.artwork-scene .object-hint{
  position:absolute;
  top:100%;
  left:50%;
  width:max-content;
  max-width:170px;
  transform:translateX(-50%) translateY(5px);
  background:rgba(255,250,232,.92);
  box-shadow:0 3px 9px rgba(73,61,34,.12);
}
.artwork-scene .scene-link:hover,
.artwork-scene .scene-link:focus-visible{
  transform:translateY(-5px) rotate(-1deg);
}
.artwork-scene .scene-link:focus-visible .object-label{
  outline:4px solid rgba(34,96,112,.55);
  outline-offset:6px;
}
.artwork-scene .scene-box{left:27.5%;top:65.5%}
.artwork-scene .scene-boots{left:14%;top:82%}
.artwork-scene .scene-finds{left:44%;top:86%}
.artwork-scene .scene-books{right:31%;top:84%}
.artwork-scene .scene-note{right:11.5%;top:84%}
.artwork-scene .scene-plant{right:9.5%;top:65%}
.artwork-scene .scene-mugs{right:22%;top:38%}
.mission-strip{
  margin-top:-4px;
  border-radius:0;
  max-width:1680px;
  border-left:0;
  border-right:0;
  background:#fff4dc;
}

.contact{display:grid;grid-template-columns:1fr .9fr;gap:clamp(32px,6vw,90px);align-items:start}
.email-link{display:inline-block;margin-top:10px;font-weight:800;text-decoration-thickness:2px;text-underline-offset:5px}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{display:grid;place-items:center;width:42px;height:42px;border:2px solid var(--ink);border-radius:50%;background:#fff9e9;text-decoration:none;font-weight:800}
.socials a:hover,.socials a:focus-visible{background:var(--ink);color:#fff}

footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:25px clamp(18px,6vw,96px);background:#274633;color:#fff}
footer p{margin:0;font:1.45rem var(--hand)}
footer a{color:#fff}
.footer-mark{font:2rem var(--hand);color:#f0bd61}

@keyframes pack{50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}
@keyframes wiggle{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg) translateY(-2px)}}
@keyframes pageflip{50%{transform:skewY(-1deg) rotateY(-7deg)}}
@keyframes pageflipBack{50%{transform:skewY(1deg) rotateY(7deg)}}
.scene-link:hover .obj,.scene-link:focus-visible .obj{animation:wiggle .55s steps(2,end) infinite}

@media(max-width:1120px){
  .site-nav{gap:10px}.site-nav a{font-size:.88rem}
  .garden-scene{min-height:820px}
  .scene-mugs{right:7%;top:205px}.scene-plant{right:2%;top:405px}.scene-note{right:4%;bottom:70px}.scene-books{right:35%;bottom:42px}.scene-finds{left:27%;bottom:170px}
  .mission-strip,.story-grid{grid-template-columns:repeat(2,1fr)}
  .role-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .site-header{padding:10px 18px}
  .menu-toggle{display:block}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:18px;background:var(--paper);border-bottom:2px dashed var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:flex-start}
  .site-nav.open{display:flex}
  .site-nav a{font-size:1.15rem}
  .garden-hero{padding-top:42px}
  .garden-intro{margin-bottom:28px}
  .garden-scene{display:grid;gap:24px;min-height:auto;padding-top:270px}
  .cafe-backdrop{right:0;top:0;width:min(360px,100%);height:220px}
  .garden-path{left:50%;right:auto;top:230px;bottom:0;width:64px;background:#e8d6a8;border-radius:999px;transform:translateX(-50%)}
  .elephant-host{left:50%;top:70px;width:235px;transform:translateX(-50%) scale(.82)}
  .footprints{opacity:.25}
  .scene-link{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:0 auto;width:min(310px,100%);display:grid;place-items:center;transform:none}
  .object-label,.object-hint{width:auto}
  .mission-strip{grid-template-columns:1fr;margin-top:34px}
  .page-hero,.split-layout,.donation-layout,.finds,.help,.contact{grid-template-columns:1fr}
  .page-hero .section-heading{text-align:center;margin:0 auto}
  .object-stage{order:-1}
  .role-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  h1{font-size:3.15rem}
  h2{font-size:2.35rem}
  .section-band{padding:58px 18px}
  .brand{font-size:.94rem}.brand-mark{width:36px;height:36px}
  .garden-scene{padding-top:250px}
  .cafe-backdrop:before{right:0;top:-58px}
  .obj.finds{transform:scale(.85)}
  .mission-step{align-items:flex-start}
  .role-grid,.story-grid{grid-template-columns:1fr}
  .book{min-height:280px}
  .book-page{min-height:280px;padding:36px 18px;font-size:1.18rem}
  footer{flex-wrap:wrap}
  footer p{width:100%;order:3}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

@media(max-width:1120px){
  .artwork-scene{aspect-ratio:16/10;background-position:center top}
  .garden-intro{width:min(450px,44vw);top:96px}
  .garden-intro h1{font-size:clamp(2.8rem,5.4vw,5rem)}
  .artwork-scene .scene-box{left:26%;top:65%}
  .artwork-scene .scene-boots{left:12%;top:83%}
  .artwork-scene .scene-finds{left:43%;top:86%}
}

@media(max-width:820px){
  .garden-hero{padding-top:0;background:#f5e9ca}
  .garden-intro{
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    padding:30px 20px 12px;
    max-width:620px;
  }
  .garden-intro h1{font-size:3.4rem}
  .garden-intro .lede{max-width:520px}
  .artwork-scene{
    display:block;
    position:relative;
    min-height:980px;
    aspect-ratio:auto;
    padding:0;
    background-image:
      linear-gradient(180deg,rgba(245,233,202,.08),rgba(245,233,202,.32)),
      url("assets/elephant-cafe-garden-hero.png");
    background-size:auto 100%;
    background-position:center top;
  }
  .artwork-scene .scene-link{
    position:absolute!important;
    width:auto;
    min-width:130px;
    min-height:52px;
    margin:0;
  }
  .artwork-scene .object-label{font-size:1.28rem;padding:7px 12px}
  .artwork-scene .object-hint{font-size:.95rem}
  .artwork-scene .scene-box{left:12%;top:31%}
  .artwork-scene .scene-boots{left:8%;top:53%}
  .artwork-scene .scene-finds{left:34%;top:69%}
  .artwork-scene .scene-books{right:13%;top:60%}
  .artwork-scene .scene-note{right:6%;top:78%}
  .artwork-scene .scene-plant{right:4%;top:35%}
  .artwork-scene .scene-mugs{right:14%;top:18%}
}

@media(max-width:560px){
  .artwork-scene{min-height:840px;background-size:auto 100%}
  .artwork-scene .object-label{font-size:1.08rem}
  .artwork-scene .object-hint{display:none}
  .artwork-scene .scene-box{left:6%;top:31%}
  .artwork-scene .scene-boots{left:4%;top:55%}
  .artwork-scene .scene-finds{left:29%;top:70%}
  .artwork-scene .scene-books{right:8%;top:60%}
  .artwork-scene .scene-note{right:3%;top:80%}
  .artwork-scene .scene-plant{right:1%;top:36%}
  .artwork-scene .scene-mugs{right:8%;top:19%}
}