/*
  Layout measured from the live Google Sites page at a 1280px-wide window.
  Fonts kept from the original: Century Gothic (text) and Lato (headings),
  both loaded from Google Fonts in index.html.
  Colour of all text: #612501 (rgb 97,37,1). Page background: white.
*/

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  font-family: sans-serif;
}

section { width: 100%; position: relative; padding: 24px 0; }

/* content column: 1146px wide, centred (63px each side at 1280px) */
.wrap { width: min(1146px, 90.16%); margin: 0 auto; }

/* ---------- Banner: 340px tall, photo as background ---------- */
.banner {
  height: 340px;
  padding: 60px 0;
  background-color: #612501;
  background-image: url("../images/bakewell_banner.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* ---------- Logo: 362 x 362, centred ---------- */
.logo img {
  display: block;
  width: min(362px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;   /* always square, never squashed */
  margin: 0 auto;
  object-fit: contain;
}

/* ---------- Text blocks ---------- */
.intro .wrap,
.treats-title .wrap { padding: 8px; }

p { margin: 0; }
p span {
  font-family: "Century Gothic", Arial;
  font-weight: 400;
  color: #612501;
}

/* Intro paragraph: 18.67px / 31.11px, centred */
.intro p { padding: 0 28px; text-align: center; }
.intro p span { font-size: 18.6667px; line-height: 31.1117px; }

/* "Our treats": 26.67px / 44.45px, centred in a 248px box starting at the text column */
.treats-title p {
  width: 248px;
  height: 44px;
  margin-left: 43.32%;
  padding-left: 9px;
  text-align: center;
}
.treats-title p span { font-size: 26.6667px; line-height: 44.4453px; }

/* ---------- Treat rows: image left (460 x 259), text right (640 wide) ---------- */
.row {
  display: grid;
  grid-template-columns: 40.14% 55.85%;
  column-gap: 3.23%;
  align-items: start;
}

.row img {
  display: block;
  width: 100%;
  aspect-ratio: 460 / 258.67;
  object-fit: cover; /* your photos are not all 16:9, so crop instead of stretching */
}

.row .text { padding-top: 14px; }

/* Title: Lato 300 / 32px box; inner span Century Gothic 40px / 48px, 0.5px spacing */
.row h2 {
  margin: 0;
  padding-top: 3.5px;
  padding-bottom: 2.5px;
  font-family: Lato, sans-serif;
  font-size: 32px;
  font-weight: 300;
  color: #612501;
}
.row h2 span {
  font-family: "Century Gothic", Arial;
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #612501;
}

/* Description: 14.67px / 24.44px, left aligned, 28px under the title */
.row p { margin-top: 28px; text-align: left; }
.row p span { font-size: 14.6667px; line-height: 24.4449px; }

/* ---------- Narrow screens: stack the columns ---------- */
@media (max-width: 767px) {
  .row { grid-template-columns: 100%; row-gap: 0; }
  .treats-title p { margin-left: 0; width: 100%; padding-left: 0; }
  .row h2 span { font-size: 32px; line-height: 38px; }
}