:root { --cream: #f1ebdb; --forest: #173d2e; --sage: #a7b99a; --soft-cream: #faf6ec; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--cream); color: var(--soft-cream); }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2rem); background: var(--cream); font-family: Arial, Helvetica, sans-serif; text-rendering: optimizeLegibility; }
a { color: inherit; }
.site-shell { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; width: min(100%, 68rem); min-height: min(47rem, calc(100svh - 4rem)); margin: 0; padding: clamp(1.75rem, 5vw, 4.5rem); overflow: hidden; border-radius: clamp(1.25rem, 3vw, 2.5rem); background: var(--forest); box-shadow: 0 1.75rem 5rem rgb(23 61 46 / 18%); }
.site-shell::before { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 82% 14%, rgb(167 185 154 / 15%), transparent 24rem), linear-gradient(135deg, rgb(255 255 255 / 3%), transparent 42%); content: ""; }
.hero, .contact { position: relative; z-index: 1; }
.hero { align-self: center; justify-self: center; width: min(100%, 50rem); padding-block: clamp(3rem, 8vh, 7rem); text-align: center; }
.hero h1 { display: flex; flex-direction: column; align-items: center; margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, serif; font-size: clamp(4.25rem, 13.5vw, 10rem); font-weight: 400; letter-spacing: -.072em; line-height: .78; }
.headline-accent { margin-left: clamp(1rem, 5vw, 4rem); color: var(--sage); font-style: italic; }
.introduction { max-width: 37ch; margin: clamp(2.5rem, 6vh, 4.5rem) auto 0; font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: -.018em; line-height: 1.55; }
.contact { margin: 0; font-size: clamp(.875rem, 1.25vw, 1rem); line-height: 1.7; text-align: center; }
.contact a { display: inline-block; border-bottom: 1px solid rgb(250 246 236 / 58%); text-decoration: none; transition: border-color 180ms ease, color 180ms ease; }
.contact a:hover { border-color: var(--sage); color: var(--sage); }
.contact a:focus-visible { border-color: transparent; border-radius: .125rem; outline: 2px solid var(--soft-cream); outline-offset: .3rem; }
.butterfly { position: absolute; z-index: 0; top: clamp(1.5rem, 4vw, 3.5rem); right: clamp(1.5rem, 4vw, 3.5rem); width: clamp(4.5rem, 9vw, 7rem); height: auto; fill: none; stroke: var(--sage); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; opacity: .72; pointer-events: none; animation: flutter 6s ease-in-out infinite alternate; }
.js .hero, .js .contact { opacity: 0; transform: translateY(.75rem); transition: opacity 700ms ease, transform 700ms ease; }
.js.is-ready .hero, .js.is-ready .contact { opacity: 1; transform: translateY(0); }
.js.is-ready .hero { transition-delay: 100ms; }
.js.is-ready .contact { transition-delay: 200ms; }
@keyframes flutter { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-.4rem) rotate(2deg); } }
@media (max-width: 640px) { body { padding: .5rem; } .site-shell { min-height: calc(100svh - 1rem); padding: 1.5rem 1.25rem; border-radius: 1.25rem; } .hero { padding-block: 5rem 3rem; } .hero h1 { font-size: clamp(3.75rem, 19vw, 5.75rem); line-height: .82; } .headline-accent { margin-left: .75rem; } .introduction { margin-top: 2.25rem; font-size: 1rem; } .contact { font-size: .875rem; } .butterfly { top: 1rem; right: 1rem; width: 3.75rem; } }
@media (max-width: 380px) { .site-shell { padding-inline: 1rem; } .hero h1 { font-size: 3.5rem; } .contact a { display: block; width: fit-content; margin: .2rem auto 0; } }
@media (prefers-reduced-motion: reduce) { .butterfly { animation: none; } .contact a, .js .hero, .js .contact { transition: none; } }