@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/young-serif-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/caveat-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/karla-latin.woff2) format('woff2');
}

:root {
  --ground: #e3e7cc;
  --ink: #2a2622;
  --ink-soft: #4a453d;
  --accent: #a1234b;
  --accent-dark: #7a1838;
  --paper: #fbfaf2;
  --polaroid: #fbf9f4;
  --line: #dfe2cb;
  --dash: #a8ad8c;
  --on-accent: #fbf6ee;
  --shadow: 0 16px 34px -18px rgba(42, 38, 34, 0.4);
  --serif: 'Young Serif', Georgia, serif;
  --hand: 'Caveat', cursive;
  --sans: 'Karla', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 28px 0;
}

.logo {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--ink);
  text-decoration: none;
}
.logo span { color: var(--accent); }
.logo:hover { color: var(--ink); }

.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: background-color .2s ease;
}
.btn:hover { background: var(--accent-dark); color: var(--on-accent); }

.intro {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 48px 0 88px;
}

.intro__text {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.intro h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.intro h1 span { color: var(--accent); }

.intro p {
  margin: 0;
  max-width: 440px;
  font-size: 19px;
}

.sketch {
  flex: 0 1 300px;
  position: relative;
  margin: 0;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, var(--line) 27px 28px);
  padding: 18px 20px 14px;
  transform: rotate(3deg);
  box-shadow: var(--shadow);
}
.sketch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 90px;
  height: 24px;
  margin-left: -45px;
  background: rgba(161, 35, 75, 0.22);
  transform: rotate(-4deg);
}
.sketch img { width: 100%; height: auto; }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 72px 48px;
  align-items: start;
  padding-bottom: 112px;
}

.cake {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}
.gallery .cake:nth-child(3n+2) { padding-top: 48px; }

.polaroid {
  margin: 0;
  background: var(--polaroid);
  padding: 14px 14px 10px;
  box-shadow: var(--shadow);
  transform: rotate(var(--tilt, -1deg));
  transition: transform .25s ease;
}
.cake:nth-child(6n+1) .polaroid { --tilt: -1.5deg; }
.cake:nth-child(6n+2) .polaroid { --tilt: 1.2deg; }
.cake:nth-child(6n+3) .polaroid { --tilt: -0.6deg; }
.cake:nth-child(6n+4) .polaroid { --tilt: 1.4deg; }
.cake:nth-child(6n+5) .polaroid { --tilt: -1deg; }
.cake:nth-child(6n+6) .polaroid { --tilt: 0.8deg; }
.cake:hover .polaroid { transform: rotate(0deg) translateY(-4px); }

.polaroid__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  background: repeating-linear-gradient(135deg, #e9e6dc 0 12px, #e0ddd1 12px 24px);
}
.polaroid__photo--square { aspect-ratio: 1 / 1; }

.polaroid figcaption {
  padding-top: 8px;
  font-family: var(--hand);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.cake__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 6px;
}
.cake__meta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.cake__info p {
  margin: 0;
  color: var(--ink-soft);
}

.legal {
  max-width: 720px;
  padding: 48px 0 112px;
}
.legal h1 {
  margin: 0 0 32px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
}
.legal h2 {
  margin: 0 0 8px;
  font-family: var(--hand);
  font-size: 28px;
  color: var(--accent);
}
.legal p { margin: 0 0 24px; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0 36px;
  font-size: 14px;
  color: var(--ink-soft);
}
.site-footer nav { display: flex; gap: 24px; }

@media (max-width: 960px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
  .gallery .cake:nth-child(3n+2) { padding-top: 0; }
  .gallery .cake:nth-child(2n) { padding-top: 40px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .intro { padding: 24px 0 64px; gap: 40px; }
  .sketch { flex-basis: 240px; margin: 0 auto; }
  .gallery { grid-template-columns: 1fr; gap: 48px; }
  .gallery .cake:nth-child(2n) { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid, .btn { transition: none; }
}