:root {
  --sun: #ffd23f;
  --sky: #4ec5f1;
  --pop: #ff5d73;
  --ink: #1a1a2e;
  --cream: #fff8e7;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 1100px; margin: 0 auto; padding: 4vw; }

.hero {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 20% 20%, var(--sun) 0 80px, transparent 81px),
    radial-gradient(circle at 80% 30%, var(--pop) 0 40px, transparent 41px),
    linear-gradient(180deg, var(--sky) 0%, var(--cream) 90%);
  border-radius: 24px;
  padding: 6vw 4vw;
}

h1 {
  font-size: clamp(4rem, 18vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

h1 span {
  display: block;
  color: var(--ink);
}

h1 span.strike {
  position: relative;
  color: var(--pop);
}

h1 span.strike::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%; top: 48%;
  height: 0.12em;
  background: var(--ink);
  transform: rotate(-4deg);
}

.sub {
  margin-top: 1.5rem;
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: var(--ink);
  font-family: "Georgia", serif;
  font-style: italic;
  font-weight: normal;
}

.gallery {
  margin-top: 6vw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

figure {
  background: white;
  border-radius: 12px;
  padding: 12px 12px 36px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: rotate(var(--r, 0deg));
  transition: transform .2s ease;
}

figure:nth-child(odd)  { --r: -1.5deg; }
figure:nth-child(even) { --r:  1.5deg; }
figure:hover { transform: rotate(0) scale(1.02); }

.ph {
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(
    45deg,
    #eee 0 12px,
    #f7f7f7 12px 24px
  );
  display: flex; align-items: center; justify-content: center;
  color: #999;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  border-radius: 4px;
}

figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

footer {
  margin-top: 8vw;
  text-align: center;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #666;
  padding-bottom: 2rem;
}