:root {
  --bark:    #2e2119;
  --husk:    #6f5a3e;
  --conker:  #7b3f16;
  --shell:   #a8571f;
  --parch:   #f2e6d0;
  --moss:    #6b7a4a;
  --serif:   Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 1.5rem;
  font-family: var(--serif);
  color: var(--bark);
  background: var(--parch);
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(168, 87, 31, 0.16), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(107, 122, 74, 0.18), transparent 55%);
  text-align: center;
}

.conker {
  width: clamp(96px, 22vw, 156px);
  height: auto;
  animation: sway 7s ease-in-out infinite;
  transform-origin: 50% 8%;
}

@keyframes sway {
  0%, 100% { transform: rotate(-3.5deg); }
  50%      { transform: rotate(3.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .conker { animation: none; }
}

h1 {
  margin: 0;
  font-size: clamp(2.75rem, 11vw, 5.5rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 0.95;
  color: var(--conker);
  text-transform: lowercase;
}

h1 .factor { display: block; color: var(--husk); }

.tagline {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--husk);
}

.rule {
  width: min(260px, 60vw);
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--husk), transparent);
  opacity: 0.6;
}

footer {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
}

footer a { color: inherit; }
footer a:hover { color: var(--shell); }