/* START HERE: these are the colors you'll probably change first! */
:root { --cream:#fff9ee; --ink:#35302e; --pink:#f7abd0; --yellow:#f7e478; --blue:#a9dcec; --green:#c9e6bc; --purple:#c9b8f3; }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family: 'Trebuchet MS', Verdana, sans-serif; cursor:url('assets/prairie-dog-cursor.png') 24 4, auto; }
a,button { color:inherit; }
a:hover,button:hover { cursor:url('assets/prairie-dog-cursor.png') 24 4, pointer; }
a:focus-visible { outline:3px dashed #6a4784; outline-offset:4px; }
.skip{position:absolute;top:-100px;left:12px;background:white;padding:12px;z-index:20}.skip:focus{top:10px}
.topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px clamp(20px,5vw,70px);border-bottom:2px solid var(--ink);background:var(--cream)}
.wordmark{font-family:Georgia,serif;font-size:clamp(23px,2.8vw,34px);font-weight:700;text-decoration:none;letter-spacing:-1.8px}.wordmark span{color:#e37da7}
nav{display:flex;gap:clamp(12px,3vw,38px);flex-wrap:wrap}nav a{text-decoration:none;font-weight:700;font-size:14px}nav a:hover{text-decoration:underline;text-decoration-style:wavy;text-underline-offset:5px}
.hero{position:relative;min-height:610px;padding:100px 7vw 110px;text-align:center;background:var(--pink);overflow:hidden}
.hero:before{content:'';position:absolute;width:400px;height:400px;border:2px solid rgba(53,48,46,.25);border-radius:50%;top:-180px;left:-110px}.hero:after{content:'';position:absolute;width:310px;height:310px;background:var(--yellow);border-radius:50%;right:-100px;bottom:-175px}
.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:2px;font-weight:800}
.hero h1{position:relative;z-index:1;font-size:clamp(55px,9.3vw,130px);line-height:.96;letter-spacing:-.065em;margin:24px auto 20px;max-width:1050px;font-family:Georgia,serif;font-weight:700}
h1 em,h2 em{font-weight:normal;font-style:italic}.period{color:#fff4d5}.hero p{font-size:clamp(17px,2vw,22px)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;text-decoration:none;background:var(--ink);color:white;padding:16px 23px;border-radius:999px;font-size:14px;font-weight:800;border:2px solid var(--ink);transition:transform .2s,background .2s}.button:hover{transform:rotate(-2deg) translateY(-3px);background:#534448}.hero .button{margin-top:20px}.floating-star{position:absolute;top:110px;right:15%;font-size:90px;color:var(--yellow);transform:rotate(-12deg)}.hero-note{position:absolute;bottom:25px;left:30px;font-size:13px;transform:rotate(-5deg)}
.section{padding:95px clamp(20px,7vw,105px)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:36px}.section-heading p{max-width:300px;line-height:1.6}.section h2{font-family:Georgia,serif;font-size:clamp(40px,6vw,72px);letter-spacing:-.055em;line-height:1.05;margin:12px 0}.section-heading h2 span{color:#df8ab6}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.tile{min-width:0}.photo-placeholder{min-height:320px;aspect-ratio:4/5;display:flex;justify-content:center;align-items:center;border:2px solid var(--ink);border-radius:220px 220px 10px 10px;box-shadow:8px 9px 0 var(--ink);font-family:Georgia,serif;text-align:center;font-size:clamp(26px,4vw,55px);font-weight:800;line-height:1.05;letter-spacing:-.06em;transition:transform .2s}.tile:hover .photo-placeholder{transform:translateY(-8px) rotate(-1deg)}.tile-1 .photo-placeholder{background:var(--purple)}.tile-2 .photo-placeholder{background:var(--green)}.tile-3 .photo-placeholder{background:var(--blue)}.tile-caption{display:flex;justify-content:space-between;gap:8px;margin-top:25px;font-size:14px}.tile-caption strong{font-family:Georgia,serif;font-size:23px}.tile-caption span{text-align:right}
/* To use photos instead, replace a placeholder with: <img src="images/my-photo.jpg" alt="Description"> and add CSS sizing for .photo-placeholder img */
.about{background:var(--yellow);display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:center}.about .sticker{font-size:clamp(140px,23vw,300px);line-height:1;text-align:center;color:#f08ab9;filter:drop-shadow(8px 8px 0 var(--ink))}.about p{font-size:clamp(18px,2vw,24px);line-height:1.6;max-width:750px}
.contact{text-align:center;background:var(--blue)}.contact h2{margin:18px auto;max-width:900px}.contact p{font-size:18px}.contact-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:32px auto 0}.button-outline{background:transparent;color:var(--ink)}.button-outline:hover{background:white}.contact .fine-print{font-size:12px;max-width:520px;margin:22px auto;opacity:.75;line-height:1.5}
footer{padding:24px clamp(20px,5vw,70px);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px}
@media(max-width:720px){.topbar{flex-direction:column}.hero{min-height:530px;padding:95px 20px 100px}.floating-star{font-size:50px;top:45px;right:6%}.section{padding:70px 25px}.section-heading{display:block}.gallery{grid-template-columns:1fr;gap:35px}.photo-placeholder{min-height:0;max-width:450px;margin:auto}.about{grid-template-columns:1fr;gap:15px}.about .sticker{font-size:125px}footer{justify-content:center;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.photo-placeholder{transition:none}}