:root {
  --parchment: #f3e8d2;
  --paper: #fbf5e9;
  --ink: #17120f;
  --walnut: #71352a;
  --terracotta: #a65338;
  --muted: #705b4d;
}
* { box-sizing: border-box; }
html { background: var(--parchment); }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: "Nunito Sans", system-ui, sans-serif; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.30), transparent 32%), radial-gradient(circle at 84% 82%, rgba(166,83,56,.08), transparent 28%), var(--parchment); }
.container { width: min(100% - 32px, 720px); margin: 0 auto; padding: 56px 0 42px; text-align: center; }
.hero, .about { background: var(--paper); border: 1px solid rgba(113,53,42,.22); box-shadow: 0 18px 42px rgba(79,43,27,.14); }
.hero { overflow: hidden; padding: 30px 26px 38px; border-radius: 26px; }
.brand-mark { margin: 0 auto 20px; }
.logo-illustration { display: block; width: min(100%, 390px); height: 235px; margin: 0 auto; object-fit: cover; object-position: center top; border-radius: 16px; }
.logo-wordmark { margin: -16px auto 0; color: var(--ink); font-family: "Satisfy", cursive; font-size: clamp(3.2rem, 11vw, 6.2rem); font-weight: 400; line-height: 1; white-space: nowrap; }
.eyebrow, .section-kicker { margin: 0; color: var(--walnut); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.tagline { margin: 12px auto 18px; color: var(--ink); font-family: "Satisfy", cursive; font-size: clamp(2.1rem, 8vw, 3.8rem); line-height: 1; }
.intro { max-width: 480px; margin: 0 auto 24px; color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.intro p { margin: 4px 0; }
.button { display: inline-block; padding: 13px 21px; border: 2px solid var(--walnut); border-radius: 999px; background: var(--walnut); color: var(--paper); font-weight: 700; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.button:hover, .button:focus-visible { background: transparent; color: var(--walnut); transform: translateY(-2px); }
.button:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; }
.about { margin-top: 18px; padding: 34px 28px; border-radius: 22px; }
h2 { margin: 11px 0 12px; color: var(--ink); font-family: "Satisfy", cursive; font-size: clamp(2.25rem, 8vw, 3.7rem); font-weight: 400; line-height: 1; }
.about p:last-child { max-width: 520px; margin: 0 auto; color: var(--muted); font-size: 1rem; line-height: 1.7; }
footer { margin-top: 24px; color: var(--walnut); font-size: .9rem; font-weight: 700; }
footer p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .container { width: min(100% - 24px, 720px); padding-top: 28px; } .hero { padding: 22px 16px 30px; border-radius: 20px; } .about { padding: 28px 18px; border-radius: 20px; } .logo-illustration { height: 185px; border-radius: 12px; } .logo-wordmark { margin-top: -10px; font-size: clamp(2.5rem, 12vw, 4.1rem); } .tagline { margin-top: 10px; } .intro { font-size: .97rem; } }