:root {
  --ink: #1d2b24;
  --paper: #f6f1e7;
  --line: rgba(255, 255, 255, 0.42);
  --gold: #d6a54c;
  --green: #174f3d;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: #fff;
  background: var(--paper);
  font-family: "Noto Sans Ethiopic", "Segoe UI", Arial, Helvetica, sans-serif;
}

.page-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.hero {
  width: min(100%, 1120px);
  min-height: calc(100vh - 56px);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(23, 79, 61, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(14, 50, 39, 0.88), rgba(23, 79, 61, 0.74)),
    url("assets/sunday-school-hero.jpg") center / cover no-repeat;
  box-shadow: 0 24px 70px rgba(29, 43, 36, 0.18);
}

.hero-header {
  padding: 28px clamp(20px, 5vw, 56px);
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.hero-header p,
.hero-header h1,
.hero-content p {
  margin: 0;
}

.hero-header p {
  color: #f5ead4;
  font-size: clamp(1.05rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.55;
}

.hero-header h1 {
  margin-top: 8px;
  color: var(--gold);
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  line-height: 1.25;
}

.hero-content {
  display: grid;
  place-items: center;
  padding: 40px clamp(22px, 6vw, 84px);
  text-align: center;
}

.hero-content p {
  max-width: 880px;
  color: #fffdf8;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.28;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.35);
}

@media (max-width: 640px) {
  .page-shell {
    padding: 14px;
  }

  .hero {
    min-height: calc(100vh - 28px);
    border-radius: 8px;
  }

  .hero-header {
    padding-block: 22px;
  }
}