:root { --ink: #171326; --cream: #fcf4dc; --lime: #ddff65; --violet: #af87ff; --orange: #ff8657; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.hero { min-height: 76vh; overflow: hidden; position: relative; padding: 5vw 8vw 7vw; background: var(--ink); color: var(--cream); }
.eyebrow { letter-spacing: .12em; font-size: clamp(.65rem, 1.2vw, .83rem); margin: 0; }
h1 { position: relative; z-index: 2; margin: 13vh 0 1rem; font: clamp(5.5rem, 17vw, 15rem)/.72 Georgia, serif; letter-spacing: -.07em; }
h1 em { color: var(--lime); font-weight: normal; }
.intro { position: relative; z-index: 2; max-width: 33rem; line-height: 1.7; font-size: clamp(.9rem, 1.6vw, 1.1rem); }
.button { display: inline-block; position: relative; z-index: 2; margin-top: 1.5rem; padding: .9rem 1.2rem; color: var(--ink); background: var(--lime); text-decoration: none; transition: transform .2s ease; }
.button:hover, .button:focus-visible { transform: translate(4px, -4px); outline: 2px solid var(--violet); }
.button span { font-size: 1.2em; margin-left: 1.2rem; }
.moon { position: absolute; width: min(30vw, 25rem); aspect-ratio: 1; right: 9vw; top: 10vh; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 1rem rgba(255,134,87,.12); }
.cat { position: absolute; z-index: 1; width: min(35vw, 29rem); aspect-ratio: .82; right: 4vw; bottom: -8vw; border-radius: 54% 54% 17% 17%; background: var(--violet); transform: rotate(-4deg); animation: sit 5s ease-in-out infinite; }
.cat i { position: absolute; top: -11%; width: 35%; height: 28%; background: var(--violet); z-index: -1; }
.cat i:first-child { left: 8%; clip-path: polygon(0 100%, 15% 0, 100% 100%); }
.cat i:nth-child(2) { right: 8%; clip-path: polygon(0 100%, 85% 0, 100% 100%); }
.cat b { position: absolute; top: 37%; left: 31%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: var(--lime); box-shadow: 180px 0 var(--lime); }
.cat span { position: absolute; bottom: 10%; right: -28%; width: 45%; height: 16%; border: 2.7rem solid var(--violet); border-left: 0; border-radius: 0 100vw 100vw 0; transform: rotate(19deg); }
.status { padding: 6rem 8vw 7rem; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
article { min-height: 14rem; padding: 1.5rem; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: #fff9e8; }
h2 { margin: 3rem 0 .6rem; font: 2.1rem Georgia, serif; } article p { line-height: 1.6; }
.dot { display: block; width: .75rem; aspect-ratio: 1; border-radius: 50%; background: var(--lime); }.amber { background: var(--orange); }.violet { background: var(--violet); }
footer { padding: 2rem 8vw; background: var(--lime); font-size: .75rem; }
@keyframes sit { 50% { transform: rotate(1deg) translateY(-8px); } }
@media (max-width: 680px) { .hero { min-height: 760px; padding: 2rem 7vw; } h1 { margin-top: 18vh; } .moon { right: 2rem; top: 5rem; width: 52vw; } .cat { width: 78vw; right: -5vw; bottom: -3rem; } .cat b { box-shadow: 110px 0 var(--lime); } .cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; } }