:root {
  color: #272521;
  background: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: #ffffff;
  color: #272521;
}

button,
img {
  -webkit-tap-highlight-color: transparent;
}

.site-shell {
  min-height: 100vh;
  display: grid;
}

.flower-stage {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  transition: opacity 780ms ease, transform 780ms ease, visibility 780ms ease;
}

.flower-stage.is-leaving {
  opacity: 0;
  transform: translateY(-10px) scale(0.94);
  visibility: hidden;
}

.flower-button {
  position: absolute;
  width: 128px;
  height: 128px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  transition: transform 260ms ease;
}

.flower-button--one {
  left: 11%;
  top: 22%;
}

.flower-button--two {
  left: 31%;
  top: 14%;
}

.flower-button--three {
  left: 58%;
  top: 25%;
}

.flower-button--four {
  left: 83%;
  top: 16%;
}

.flower-button--five {
  left: 19%;
  top: 53%;
}

.flower-button--six {
  left: 43%;
  top: 43%;
}

.flower-button--seven {
  left: 72%;
  top: 48%;
}

.flower-button--eight {
  left: 91%;
  top: 68%;
}

.flower-button--nine {
  left: 36%;
  top: 78%;
}

.flower-button--ten {
  left: 64%;
  top: 83%;
}

.flower-button:focus-visible {
  outline: 1px solid #8c7d65;
  outline-offset: 14px;
}

.flower-button:hover {
  transform: translate(-50%, calc(-50% - 2px));
}

.flower-img {
  position: absolute;
  inset: 0;
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  transition: opacity 220ms ease;
}

.dandelion {
  opacity: 0;
}

.flower-button:hover .poppy,
.flower-button:focus-visible .poppy {
  opacity: 0;
}

.flower-button:hover .dandelion,
.flower-button:focus-visible .dandelion {
  opacity: 1;
}

.content {
  width: 100%;
  margin: 0;
  padding: 0 0 clamp(56px, 10vw, 112px);
}

.content.is-visible {
  opacity: 1;
}

.intro {
  width: min(880px, calc(100vw - 40px));
  max-width: 670px;
  margin: clamp(72px, 12vw, 132px) auto clamp(64px, 10vw, 108px);
}

.hero-visual {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: #ffffff;
  overflow: hidden;
}

.hero-visual img {
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.kicker {
  margin: 0 0 18px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.76rem;
  letter-spacing: 0;
  color: #81796c;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 640px;
  margin-bottom: 24px;
  font-size: clamp(2.25rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 0.98;
}

.intro p:not(.kicker) {
  max-width: 560px;
  margin-bottom: 1.4em;
  font-size: clamp(1.04rem, 2vw, 1.24rem);
  line-height: 1.7;
  color: #555046;
}

.intro p:last-child {
  margin-bottom: 0;
}

.projects {
  width: min(880px, calc(100vw - 40px));
  margin: 0 auto;
  display: grid;
  gap: clamp(48px, 8vw, 88px);
}

.project {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 6vw, 72px);
}

.project--reverse {
  grid-template-columns: minmax(0, 1fr) 152px;
}

.project--reverse img {
  grid-column: 2;
}

.project--reverse div {
  grid-column: 1;
  grid-row: 1;
}

.project img {
  width: 152px;
  height: 112px;
  object-fit: contain;
  image-rendering: pixelated;
}

.project h2 {
  margin-bottom: 12px;
  font-size: clamp(1.42rem, 3vw, 2.15rem);
  font-weight: 400;
  line-height: 1.05;
}

.project p {
  max-width: 470px;
  margin-bottom: 0;
  color: #625c50;
  font-size: 1rem;
  line-height: 1.65;
}

@keyframes pageIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 640px) {
  .intro,
  .projects {
    width: min(100vw - 32px, 520px);
  }

  .project,
  .project--reverse {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 24px;
  }

  .project--reverse img,
  .project--reverse div {
    grid-column: auto;
    grid-row: auto;
  }

  .project img {
    width: 96px;
    height: 80px;
  }
}