@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
:root { --cream: #fff3dc; --ink: #24121f; --plum: #36102f; --saffron: #f7b32b; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'Baloo Bhaijaan 2', Tahoma, sans-serif; font-size: 1.08rem; line-height: 1.85; }
a { color: #a8301c; font-weight: 600; }
.top { background: var(--plum); color: var(--cream); padding: 16px 22px 30px; }
.top nav { display: flex; justify-content: space-between; align-items: center; width: min(820px, 100%); margin: 0 auto 18px; }
.top nav a { color: var(--cream); text-decoration: none; display: inline-flex; align-items: center; min-height: 42px; }
.wm { font-family: Alexandria, sans-serif; font-size: 1.8rem; font-weight: 900; line-height: 1; }
h1 { font-family: Alexandria, sans-serif; font-weight: 800; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.5; margin: 0 auto; width: min(820px, 100%); }
.top p { width: min(820px, 100%); margin: 2px auto 0; opacity: .8; font-size: .98rem; }
main { width: min(820px, 100% - 36px); margin: 28px auto 60px; }
h2 { font-family: Alexandria, sans-serif; font-weight: 700; font-size: clamp(1.25rem, 3vw, 1.55rem); line-height: 1.5; margin: 30px 0 6px; }
p { margin: 6px 0; }
ul { margin: 6px 0; padding-inline-start: 24px; }
li { margin: 3px 0; }
.box { background: #fff8e6; border-inline-start: 5px solid var(--saffron); padding: 10px 14px; margin: 14px 0; }
.foot { margin-top: 34px; padding-top: 14px; border-top: 1px solid rgba(36, 18, 31, .2); }
@media print { .top nav { display: none; } .top { background: none; color: #000; } }