/* =========================
   RESET & BASE
   ========================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background-color: #f7f2e8;
  color: #2b1b0f;
  line-height: 1.8;
}

/* =========================
   HEADER
   ========================= */

.site-header {
  background-color: #5b1f14;
  color: #ffffff;
  text-align: center;
  padding: 36px 20px 28px;
}

.site-header h1 {
  margin: 0;
  font-size: 2.2rem;
  letter-spacing: 1px;
}

.site-header .subtitle {
  margin-top: 10px;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* =========================
   HERO (FULL WIDTH, SAFE)
   ========================= */

.hero {
  width: 100%;
  height: 260px;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92);
}

/* =========================
   CONTENT WRAPPER
   ========================= */

.container {
  max-width: 900px;
  margin: auto;
}

/* =========================
   SECTIONS
   ========================= */

.content-section {
  padding: 44px 20px;
}

.content-section h2 {
  color: #5b1f14;
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.content-section p,
.content-section ul,
.content-section ol {
  max-width: 60ch;
    margin-left: auto;
  margin-right: auto;
}

ul,
ol {
  padding-left: 20px;
}

li {
  margin-bottom: 8px;
}

/* =========================
   NOTE BOX
   ========================= */

.note {
  background-color: #efe4d6;
  padding: 18px 20px;
  margin-top: 24px;
  border-left: 4px solid #5b1f14;
  font-size: 0.95rem;
}

/* =========================
   FOOTER
   ========================= */

.site-footer {
  background-color: #3d140c;
  color: #ffffff;
  text-align: center;
  padding: 24px 15px;
  font-size: 0.9rem;
}

.site-footer p {
  margin: 6px 0;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {
  .site-header h1 {
    font-size: 1.8rem;
  }

  .hero {
    height: 160px;
  }

  .content-section {
    padding: 32px 16px;
  }
}