/* BigCatWise: light savanna theme. Text colours checked for WCAG AA on all backgrounds used. */
:root{--bg:#fbf3e4;--card:#fffaf1;--head:#fff6e6;--tile:#ffe9c7;--line:#f0dcb8;--text:#3b2a1a;--muted:#6b5640;--title:#8a3f0a;--link:#9a4508;--btn:#f5a54a;--btn2:#ffcf70;--r:22px;
--paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23f5a54a'%3E%3Cellipse cx='16' cy='21' rx='7' ry='6'/%3E%3Ccircle cx='7.5' cy='13' r='3'/%3E%3Ccircle cx='12.5' cy='8' r='3'/%3E%3Ccircle cx='19.5' cy='8' r='3'/%3E%3Ccircle cx='24.5' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
--spots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23e9b872' stroke-width='3' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M18 22a7 7 0 1 1 10 6M14 30a6 6 0 0 0 9 2'/%3E%3Cpath d='M80 18a6 6 0 1 1 9 5M77 25a5 5 0 0 0 8 2'/%3E%3Cpath d='M50 70a7 7 0 1 1 10 6M46 78a6 6 0 0 0 9 2'/%3E%3Cpath d='M98 88a6 6 0 1 1 9 5M95 95a5 5 0 0 0 8 2'/%3E%3C/g%3E%3Cg fill='%23f2c98f' opacity='.6'%3E%3Ccircle cx='40' cy='40' r='3'/%3E%3Ccircle cx='100' cy='50' r='2.5'/%3E%3Ccircle cx='20' cy='95' r='3'/%3E%3Ccircle cx='70' cy='105' r='2'/%3E%3C/g%3E%3C/svg%3E")}
*{box-sizing:border-box}
body{margin:0;font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg) var(--spots) 0 0/240px 240px;color:var(--text)}
h1,h2,h3,.brand,.btn,nav a{font-family:"Fredoka",system-ui,sans-serif}
h1,h2,h3{color:var(--title);font-weight:600;line-height:1.25}
a{color:var(--link);text-decoration-thickness:2px;text-underline-offset:2px}a:hover{color:var(--text)}
header{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:.6rem 1.2rem;background:var(--head);border-bottom:3px dotted var(--line);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--link);font-weight:600;font-size:1.45rem;text-decoration:none}
.brand svg{background:#fff1d6;border-radius:50%;padding:2px}
nav{display:flex;flex-wrap:wrap;gap:.25rem .4rem}
nav a{color:#4a3622;text-decoration:none;font-size:.95rem;font-weight:500;padding:.15rem .6rem;border-radius:999px}
nav a[aria-current],nav a:hover{background:var(--tile);color:var(--title)}
.menu{display:none;margin-left:auto;background:var(--tile);border:0;border-radius:12px;color:var(--title);font-size:1.4rem;padding:.1rem .6rem}
main{max-width:1000px;margin:auto;padding:1.5rem 1.2rem}
h1{font-size:2.3rem;margin:.4rem 0}
.hero{position:relative;padding:1.2rem 1.4rem 1.8rem;margin:1rem 0 1.5rem;background:var(--card);border:2px solid var(--line);border-radius:28px}
.hero::after{content:"";position:absolute;right:18px;top:-18px;width:54px;height:54px;background:var(--paw) center/contain no-repeat;transform:rotate(18deg)}
.btn{display:inline-block;background:var(--btn);color:var(--text);padding:.6rem 1.3rem;border-radius:999px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:1.05rem;box-shadow:0 3px 0 #d9852d;margin:.2rem 0}
.btn:hover{transform:translateY(1px);box-shadow:0 2px 0 #d9852d;color:var(--text)}.btn.alt{background:var(--btn2);box-shadow:0 3px 0 #e0a93c}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1.1rem 1.4rem;margin:1.1rem 0;box-shadow:0 4px 0 #f3e2c4}
.card h2{margin-top:0;display:flex;align-items:center;gap:.45rem}
.card h2::before{content:"";flex:none;width:1.05em;height:1.05em;background:var(--paw) center/contain no-repeat}
.card h3{margin-bottom:.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.tile{background:linear-gradient(160deg,var(--tile),var(--card));border:2px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;text-decoration:none;transition:transform .15s}
.tile:hover{transform:translateY(-3px) rotate(-.4deg)}.tile h3{margin:0;color:var(--title)}.tile p{margin:.3rem 0 0;color:var(--muted);font-size:.93rem}
.sci{color:var(--muted);font-size:.9rem}.myth{color:#a12a2a}.fact{color:#2f6b2a;list-style:none;margin-bottom:.6rem}
dt{font-family:"Fredoka",system-ui,sans-serif;font-weight:600;color:var(--title);margin-top:.7rem}dd{margin-left:1rem}
.note{font-style:italic;color:var(--muted);font-size:.92rem}
.lead{font-size:1.13rem}.meta,.crumbs{color:var(--muted);font-size:.88rem;margin:.2rem 0}.jump{font-size:.92rem;background:var(--head);border:2px dashed var(--line);border-radius:16px;padding:.45rem .8rem}
.tablewrap{overflow-x:auto;border-radius:16px}table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.55rem;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--title)}thead th{background:var(--tile)}tbody tr:nth-child(even){background:#fff4e2}
.related ul{columns:2}.sources li{font-size:.92rem}
form.contact{display:grid;gap:.4rem;max-width:560px}form.contact input,form.contact textarea{font:inherit;padding:.6rem .8rem;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--text)}form.contact input:focus,form.contact textarea:focus{outline:3px solid var(--btn);outline-offset:1px}form.contact button{justify-self:start;margin-top:.6rem}
footer{text-align:center;padding:2rem 1.2rem 2.4rem;color:var(--muted);font-size:.9rem;border-top:3px dotted var(--line);margin-top:2rem;background:var(--head)}
footer h2{color:var(--title);font-size:1.2rem;margin:0 0 .3rem}
footer h2::before,footer h2::after{content:"";display:inline-block;width:.9em;height:.9em;margin:0 .35em;background:var(--paw) center/contain no-repeat;vertical-align:-.05em}
.contact-us{max-width:640px;margin:0 auto 1.2rem;background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:1rem}
:focus-visible{outline:3px solid var(--link);outline-offset:2px}
@media(max-width:760px){.menu{display:block}nav{display:none;width:100%;flex-direction:column}body.open nav{display:flex}h1{font-size:1.75rem}.related ul{columns:1}.hero::after{width:40px;height:40px;right:10px;top:-14px}}
@media(prefers-reduced-motion:reduce){.tile,.btn{transition:none}.tile:hover{transform:none}}
footer .legal{color:var(--text);font-size:.95rem;margin:.35rem 0}footer .flinks{font-size:.95rem;font-weight:600}