html,body,#root{margin:0;min-height:100%}
body{font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;background:#fff8e7;color:#2b2d42}
.site{max-width:1100px;margin:0 auto;padding:0 16px 24px}
.hero{position:relative;overflow:hidden;text-align:center;padding:48px 20px 40px;margin-top:12px;border-radius:32px;background:linear-gradient(135deg,#29b6f6,#26c6da 45%,#7be0a8)}
.blob{position:absolute;border-radius:50%;opacity:.55}
.b1{width:160px;height:160px;background:#ffd93d;left:-40px;top:-40px}
.b2{width:110px;height:110px;background:#ff6fa5;right:30px;top:20px}
.b3{width:90px;height:90px;background:#ff9f1c;left:12%;bottom:-30px}
.hero>*:not(.blob){position:relative}
h1{font-family:"Baloo 2","Trebuchet MS",system-ui,sans-serif;font-weight:800;font-size:clamp(64px,16vw,128px);margin:0;line-height:1;color:#ffe14d;-webkit-text-stroke:3px #1b6ca8;text-shadow:5px 6px 0 #1b6ca8;letter-spacing:2px}
.tag{display:inline-block;background:#fff;color:#1b6ca8;font-weight:800;font-size:clamp(18px,4vw,28px);padding:8px 22px;border-radius:999px;margin:14px 0 8px;text-transform:uppercase;letter-spacing:1px}
.lede{max-width:620px;margin:12px auto 22px;font-size:clamp(17px,2.6vw,21px);line-height:1.5;color:#0d3a5c;font-weight:600}
.btn{display:inline-block;background:#ff6fa5;color:#fff;font-weight:800;text-decoration:none;padding:14px 28px;border-radius:999px;font-size:18px;box-shadow:0 5px 0 #c2417a}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #c2417a}
.btn.small{background:var(--c);box-shadow:0 4px 0 rgba(0,0,0,.25);font-size:16px;padding:12px 22px;min-height:20px}
h2{text-align:center;font-size:clamp(26px,5vw,38px);color:#1b6ca8;margin:44px 0 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.card{background:#fff;border-radius:28px;overflow:hidden;border:4px solid var(--c);display:flex;flex-direction:column;box-shadow:0 8px 0 rgba(0,0,0,.08)}
.card img{width:100%;aspect-ratio:7/10;object-fit:cover;display:block;background:#eee}
.body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pill{align-self:flex-start;background:var(--c);color:#fff;font-weight:800;font-size:13px;padding:4px 12px;border-radius:999px}
h3{margin:2px 0;font-size:24px;color:var(--c);filter:brightness(.8)}
.body p{margin:0;line-height:1.5;font-size:17px}

.stars{color:#ffb400;letter-spacing:1px}.stars i{font-style:normal;color:#ddd}
blockquote{margin:6px 0;padding:12px 14px;background:#fff8e7;border-left:6px solid var(--c);border-radius:12px;font-style:italic;font-size:16px;line-height:1.45}
cite{display:block;margin-top:6px;font-style:normal;font-size:13px;font-weight:700;color:#666}
.body .btn{margin-top:auto;align-self:flex-start}
.author{background:#fff;border-radius:28px;padding:8px 24px 28px;margin-top:40px;text-align:center;border:4px dashed #ff9f1c}
.author h2{margin-top:20px}.author p{max-width:640px;margin:0 auto;font-size:18px;line-height:1.6}
footer{text-align:center;color:#6b6b80;font-size:14px;margin-top:32px}
.card img.sq{aspect-ratio:auto;height:auto;object-fit:contain;background:#fff}
.grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cover{display:block}.cover img{transition:opacity .15s}.cover:hover img{opacity:.9}