/* maiahariton.com — base reset + shared reduced-motion guards. Page-specific @keyframes live inline in each page's (they vary per scene). */ html, body { margin: 0; padding: 0; background: #f5f1e8; } * { box-sizing: border-box; } summary { list-style: none; } summary::-webkit-details-marker { display: none; } img { max-width: 100%; } a { color: inherit; } :focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; } /* Confetti particles are appended to ; keep the burst keyframe global so any page can call window.mhConfetti(). */ @keyframes ssConfetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translate(var(--cx, 0px), var(--cy, -90px)) rotate(200deg) scale(.4); } } /* ---------- mobile hamburger nav (injected by site.js) ---------- */ .mh-burger { display: none; align-items: center; justify-content: center; appearance: none; margin-left: auto; width: 44px; height: 40px; flex-shrink: 0; background: #fffdf6; border: 1.5px solid #1a1a1a; border-radius: 11px; color: #1a1a1a; font-size: 19px; line-height: 1; cursor: pointer; box-shadow: 2px 2px 0 rgba(26,26,26,.85); } @media (max-width: 760px) { .mh-burger { display: inline-flex; } nav .mh-links { display: none !important; } nav .mh-links.mh-open { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 16px !important; flex-wrap: nowrap !important; position: absolute; top: 100%; left: 0; right: 0; background: rgba(245,241,232,.98); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(26,26,26,.16); box-shadow: 0 20px 30px -18px rgba(26,26,26,.5); padding: 20px clamp(20px,4vw,56px) 24px; z-index: 130; font-size: 15px; } nav .mh-links.mh-open > a, nav .mh-links.mh-open > details { width: 100%; } nav .mh-links.mh-open details > div { position: static !important; margin-left: 0 !important; width: 100% !important; transform: none !important; box-shadow: none !important; margin-top: 8px !important; border: 1px solid rgba(26,26,26,.2) !important; } nav .mh-links.mh-open details > div > span:first-child { display: none !important; } /* washi tape */ } /* hide overlap-prone decorative captions on small screens */ @media (max-width: 700px) { .mh-mobile-hide { display: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }