:root { color-scheme: light; --ink:#25313a; --cream:#fff7e6; --orange:#ee7243; --yellow:#ffd35c; --blue:#3d91a8; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--cream); color:var(--ink); font-family:Georgia,serif; }
main { overflow:hidden; }
.hero { min-height:46vh; position:relative; isolation:isolate; padding:clamp(2rem,7vw,6rem) clamp(1.25rem,9vw,11rem) 3rem; background:linear-gradient(155deg,#9bd7e2,#d9f0e7 58%,var(--cream) 58%); }
.kicker { margin:0 0 1rem; font:700 .72rem/1 Arial,sans-serif; letter-spacing:.18em; color:#28566b; }
h1 { position:relative; z-index:1; margin:0; max-width:8ch; font-size:clamp(3.7rem,10vw,8.5rem); line-height:.78; letter-spacing:-.075em; text-transform:uppercase; }
h1 em { color:var(--orange); font-style:normal; }
.intro { position:relative; z-index:1; max-width:31rem; margin:1.6rem 0; font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.45; }
.skip { position:relative; z-index:1; display:inline-block; padding:.8rem 1.1rem; border:2px solid var(--ink); border-radius:2rem; color:inherit; background:#fff7e6; text-decoration:none; font:700 .85rem Arial,sans-serif; }
.skip:focus-visible,.dog:focus-visible { outline:4px solid #143b54; outline-offset:4px; }
.sun { position:absolute; z-index:0; width:min(31vw,22rem); aspect-ratio:1; right:8%; top:8%; border-radius:50%; background:var(--yellow); opacity:.8; }
.parade { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,4vw,4rem); padding:clamp(2rem,6vw,5rem) clamp(1.25rem,9vw,11rem) clamp(3rem,8vw,7rem); background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(37,49,58,.04) 19px 20px); }
.dog { text-align:center; animation:amble 4.2s ease-in-out infinite alternate; }
.dog:nth-child(2) { animation-delay:-1.3s; } .dog:nth-child(3) { animation-delay:-2.4s; }
.dog:hover,.dog:focus { animation-play-state:paused; }
.dog img { width:min(100%,17rem); height:auto; filter:drop-shadow(0 1rem .55rem rgba(37,49,58,.17)); }
h2 { margin:.8rem 0 .15rem; font-size:clamp(1.5rem,3vw,2.2rem); } .dog p { margin:0; font:700 .78rem Arial,sans-serif; letter-spacing:.05em; text-transform:uppercase; color:#526570; }
footer { padding:1.4rem; text-align:center; background:var(--ink); color:var(--cream); font:700 .76rem Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
@keyframes amble { from { transform:translateX(-.7rem) rotate(-1deg); } to { transform:translateX(.7rem) rotate(1deg); } }
@media (max-width:650px) { .parade { grid-template-columns:1fr; gap:2.5rem; } .sun { right:-8%; top:11%; width:13rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } .dog { transform:none; } }