:root{--bg:#fdf6e9;--bg-accent:#fff8ec;--text:#140f2b;--muted:#4a4164;--accent:#7b2ff7;--brand-yellow:#ffd23f;--brand-pink:#ff2d95;--brand-teal:#00c9c8;--card-bg:#fff8ec;--card-border:rgba(0,201,200,.35);--panel-shadow:0 8px 20px rgba(20,15,43,.14)}
*{box-sizing:border-box}
html,body{height:100%}
.body-fix{}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.wrap{max-width:980px;margin:0 auto;padding:28px}
.site-header{position:relative;isolation:isolate;overflow:hidden;padding:28px 0;background:linear-gradient(90deg,var(--brand-yellow),var(--brand-pink),var(--brand-teal));border-bottom:3px solid var(--text)}
.site-header .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
/* make brand a block so the logo centers cleanly and the tagline sits directly beneath */
.brand{display:block;margin:0 auto;text-decoration:none;color:inherit;text-align:center}
/* Larger site logo to match full artwork; responsive scaling */
/* shrink logo by 20% from original sizes */
.logo{width:448px;height:auto;max-width:80%;display:block;margin:0 auto 6px}
.site-title{font-weight:700;font-size:20px}
.tagline{margin:6px 0 0;padding:7px 14px;color:var(--text);display:block;font-weight:700;line-height:1.35;background:rgba(255,248,236,.78);border:1px solid rgba(255,255,255,.72);border-radius:999px;box-shadow:0 3px 10px rgba(20,15,43,.15)}
.confetti{position:absolute;inset:0;z-index:0;pointer-events:none}
.confetti span{position:absolute;top:-14px;left:var(--left);width:var(--size);height:calc(var(--size) * 1.8);background:var(--color);border-radius:50% 35%;opacity:.85;transform:rotate(var(--rotation));animation:confetti-fall var(--duration) linear var(--delay) infinite}
.confetti span:nth-child(3n){--color:var(--brand-pink);--size:7px;--duration:14s;--delay:-8s;--rotation:28deg}
.confetti span:nth-child(3n+1){--color:var(--text);--size:5px;--duration:18s;--delay:-13s;--rotation:72deg}
.confetti span:nth-child(3n+2){--color:var(--brand-teal);--size:8px;--duration:16s;--delay:-4s;--rotation:112deg}
.confetti span:nth-child(1){--duration:17s;--delay:-2s;--drift:9px}.confetti span:nth-child(2){--duration:21s;--delay:-15s;--drift:-13px}.confetti span:nth-child(3){--duration:15s;--delay:-9s;--drift:18px}.confetti span:nth-child(4){--duration:23s;--delay:-19s;--drift:-8px}.confetti span:nth-child(5){--duration:18s;--delay:-6s;--drift:14px}.confetti span:nth-child(6){--duration:25s;--delay:-22s;--drift:-17px}.confetti span:nth-child(7){--duration:16s;--delay:-12s;--drift:7px}.confetti span:nth-child(8){--duration:22s;--delay:-4s;--drift:-11px}.confetti span:nth-child(9){--duration:19s;--delay:-17s;--drift:16px}.confetti span:nth-child(10){--duration:24s;--delay:-10s;--drift:-15px}.confetti span:nth-child(11){--duration:15s;--delay:-1s;--drift:12px}.confetti span:nth-child(12){--duration:20s;--delay:-14s;--drift:-7px}.confetti span:nth-child(13){--duration:26s;--delay:-23s;--drift:19px}.confetti span:nth-child(14){--duration:18s;--delay:-8s;--drift:-14px}.confetti span:nth-child(15){--duration:22s;--delay:-18s;--drift:8px}.confetti span:nth-child(16){--duration:16s;--delay:-5s;--drift:-10px}.confetti span:nth-child(17){--duration:24s;--delay:-20s;--drift:15px}.confetti span:nth-child(18){--duration:19s;--delay:-11s;--drift:-18px}
.confetti span:nth-child(1){--left:5%}.confetti span:nth-child(2){--left:12%}.confetti span:nth-child(3){--left:19%}.confetti span:nth-child(4){--left:27%}.confetti span:nth-child(5){--left:35%}.confetti span:nth-child(6){--left:43%}.confetti span:nth-child(7){--left:51%}.confetti span:nth-child(8){--left:59%}.confetti span:nth-child(9){--left:67%}.confetti span:nth-child(10){--left:74%}.confetti span:nth-child(11){--left:81%}.confetti span:nth-child(12){--left:88%}.confetti span:nth-child(13){--left:97%}.confetti span:nth-child(14){--left:23%}.confetti span:nth-child(15){--left:46%}.confetti span:nth-child(16){--left:71%}.confetti span:nth-child(17){--left:9%}.confetti span:nth-child(18){--left:94%}
@keyframes confetti-fall{0%{translate:0 -16px;rotate:0deg}50%{translate:var(--drift) 55%;rotate:180deg}100%{translate:calc(var(--drift) * -1) calc(100vh + 20px);rotate:360deg}}
@media (prefers-reduced-motion:reduce){.confetti span{animation:none;top:18%}}
.intro-panel{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:14px;padding:22px 20px 18px;margin:0 0 28px;border-radius:12px;border:2px solid var(--card-border);background:var(--card-bg);box-shadow:var(--panel-shadow)}
.intro-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--brand-yellow),var(--brand-pink),var(--brand-teal))}
.intro-icon{width:32px;height:32px;flex-shrink:0;margin-top:2px}
.intro{max-width:640px;margin:0;color:var(--text);font-size:16px;line-height:1.55}
.intro strong{color:var(--accent)}
.intro em{color:var(--brand-pink);font-style:normal;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.card{position:relative;overflow:hidden;padding:22px 18px 18px;border-radius:10px;border:2px solid var(--card-border);background:var(--card-bg);box-shadow:var(--panel-shadow);opacity:0;transform:translateY(14px);animation:card-in .5s ease forwards;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--brand-yellow)}
.card:nth-child(3n+2)::before{background:var(--brand-pink)}
.card:nth-child(3n)::before{background:var(--brand-teal)}
.card:hover,.card:focus-within{transform:translateY(-4px);box-shadow:0 14px 28px rgba(20,15,43,.22);border-color:var(--accent)}
.card:nth-child(1){animation-delay:.05s}
.card:nth-child(2){animation-delay:.12s}
.card:nth-child(3){animation-delay:.19s}
.card:nth-child(4){animation-delay:.26s}
.card:nth-child(5){animation-delay:.33s}
.card:nth-child(6){animation-delay:.4s}
@keyframes card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.card h3{margin:0 0 8px 0;font-size:16px;display:flex;align-items:center;gap:8px}
.card-icon{width:20px;height:20px;flex-shrink:0}
.card p{margin:0;color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:reduce){.card{animation:none;opacity:1;transform:none}.card:hover,.card:focus-within{transform:none}}
.site-footer{padding:22px 0;text-align:center;color:var(--muted);border-top:3px solid var(--text);margin-top:32px}

/* Link styles: improved contrast, weight, and clear hover/focus indicators */
.brand .site-title { color: var(--text); }
.brand .site-title { color: var(--text); }
a, a:link, a:visited { color: var(--accent); text-decoration: none; font-weight: 700; }
a:hover, a:focus { color: var(--brand-pink); text-decoration: underline; outline: 3px solid rgba(0,201,200,.18); outline-offset: 2px; border-radius: 3px; }
.card a { color: var(--accent); }
.card h3 a { color: var(--accent); }

/* 1990s shades: drop onto the mascot's face on hover/focus */
.sunglasses{opacity:0;transform:translateY(-70px) rotate(-10deg);transform-origin:0px -11px;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .25s ease}
.brand:hover .sunglasses,.brand:focus .sunglasses,.brand:focus-visible .sunglasses{opacity:1;transform:translateY(0) rotate(0deg)}
@media (prefers-reduced-motion:reduce){.sunglasses{transition:opacity .15s ease}.brand:hover .sunglasses,.brand:focus .sunglasses{transform:none}}

/* small brand accent under headings */
.site-header { background: linear-gradient(90deg,var(--brand-yellow),var(--brand-pink),var(--brand-teal)); }
.brand { color: inherit; }
/* remove visual hover/focus for the logo link specifically */
.brand:hover, .brand:focus { opacity: 1; text-decoration: none; outline: none; }
.brand, .brand:link, .brand:visited { color: inherit; }

@media (max-width:980px){.wrap{padding:20px}.logo{width:384px;max-width:86%}}
@media (max-width:780px){.wrap{padding:16px}.logo{width:288px;max-width:86%}}
@media (max-width:420px){.logo{width:208px;max-width:90%}}

/* footer face icon */
.site-footer .wrap{display:flex;align-items:center;justify-content:center;gap:8px}
.footer-face{width:28px;height:auto;display:inline-block;margin:0;padding:0;vertical-align:middle}