@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --yellow: #fff3ae;
  --paper: #fff8cf;
  --panel: #182331;
  --panel-line: rgba(255, 255, 255, .11);
  --panel-muted: #718093;
  --dog: #f2bd38;
  --dog-light: #f7ca4b;
  --ink: #5b4819;
  --white: #fffdf2;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, .65), transparent 28%),
    linear-gradient(135deg, var(--yellow), var(--paper));
  color: var(--ink);
  font-family: 'Space Grotesk', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(24px, 5vw, 72px);
}

.hero {
  position: relative;
  display: grid;
  width: min(1180px, 100%);
  min-height: calc(100vh - clamp(48px, 10vw, 144px));
  margin: 0 auto;
  place-items: center;
}

.brand { position: relative; z-index: 2; text-align: center; }

.brand h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(3.5rem, 9vw, 9rem);
  font-weight: 700;
  letter-spacing: -.095em;
  line-height: .92;
  white-space: nowrap;
}

.brand p {
  margin: 24px 0 0;
  color: #806d2a;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .26em;
}

.dog {
  position: absolute;
  right: clamp(4%, 10vw, 14%);
  bottom: clamp(5%, 8vw, 12%);
  z-index: 1;
  width: clamp(150px, 23vw, 300px);
  transform: rotate(-2deg);
}

.dog svg { display: block; width: 100%; height: auto; overflow: visible; }

.body, .head, .leg { fill: var(--dog); }
.body { fill: var(--dog-light); }
.ear { fill: var(--white); }

.tail { fill: var(--dog); }
.tail-tip { fill: var(--white); }
.eye { fill: var(--ink); }
.nose { fill: var(--ink); }

@media (max-width: 760px) {
  main { padding: 24px; }
  .hero {
    min-height: calc(100vh - 48px);
  }
  .brand { padding-bottom: 12vh; }
  .brand h1 { font-size: clamp(2.05rem, 10vw, 4.3rem); }
  .brand p { margin-top: 16px; }
  .dog { right: 7%; bottom: 7%; width: clamp(140px, 42vw, 220px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}