:root{--sun:#ff7a59;--pink:#ff5fa2;--teal:#0fb5ae;--sea:#0b4f6c;--sand:#fff4e0;--ink:#1d2a33}
*{box-sizing:border-box}body{margin:0;font:17px/1.6 "Trebuchet MS",Verdana,system-ui,sans-serif;color:var(--ink);background:var(--sand)}
a{color:var(--sea)}a:focus-visible,button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px}
header{background:var(--sea);color:#fff}header .w{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;justify-content:space-between}
.logo{font:700 1.3rem Georgia,"Times New Roman",serif;color:#fff;text-decoration:none;letter-spacing:.5px}.logo span{color:var(--sun)}
nav a{color:#fff;margin-right:.9rem;text-decoration:none;font-size:.95rem}nav a:hover{text-decoration:underline}
.w{max-width:960px;margin:0 auto;padding:1rem}
.hero{background:linear-gradient(180deg,#ffb347 0%,var(--sun) 40%,var(--pink) 75%,#8e44ad 100%);color:#fff;text-align:center;padding:3rem 1rem 4rem;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:repeating-linear-gradient(90deg,var(--teal) 0 40px,#14c9c1 40px 80px)}
.hero h1{font:700 clamp(2rem,7vw,3.6rem)/1.1 Georgia,serif;margin:.2rem 0;text-shadow:3px 3px 0 var(--sea)}
.btn{display:inline-block;background:var(--sea);color:#fff;padding:.8rem 1.3rem;border-radius:999px;font-weight:700;text-decoration:none;border:3px solid #fff;margin-top:1rem}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:#fff;border:3px solid var(--teal);border-radius:14px;padding:1rem;box-shadow:6px 6px 0 var(--pink)}
h1,h2{font-family:Georgia,serif;color:var(--sea)}
footer{background:var(--ink);color:#e8e8e8;font-size:.9rem;margin-top:2rem}footer a{color:#ffd29a}