:root {
  color-scheme: light;
  --ink: #14261d;
  --pine: #205340;
  --leaf: #70a36e;
  --cream: #f7f2e8;
  --paper: #fffdf8;
  --orange: #f28c4b;
  --line: #d9dfce;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

a { color: inherit; }

.site-header,
.hero,
.highlights,
.about,
.join,
footer {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pine);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--paper);
  font-family: Georgia, serif;
  font-size: 1.25rem;
}

.hero {
  min-height: 590px;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: center;
  gap: 72px;
  padding: 72px 6.5%;
  border-radius: 30px;
  background: linear-gradient(135deg, #e2edcf 0%, #c1dbaf 48%, #88b985 100%);
  overflow: hidden;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--pine);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }

h1, h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

h1 { max-width: 620px; margin-bottom: 22px; font-size: clamp(3.8rem, 8vw, 7.6rem); }
h2 { max-width: 720px; margin-bottom: 22px; font-size: clamp(2.5rem, 5vw, 4.5rem); }

.intro { max-width: 520px; font-size: 1.16rem; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }

.button {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid var(--pine);
  border-radius: 999px;
  background: var(--pine);
  color: white;
  font-weight: 750;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}

.button:hover, .button:focus-visible { background: #153d2e; transform: translateY(-2px); }
.button-small { padding: 9px 15px; font-size: 0.9rem; }
.button-light { background: var(--paper); color: var(--pine); }
.text-link { font-weight: 750; text-underline-offset: 4px; }

.court-card {
  padding: 36px;
  border: 1px solid rgba(20, 38, 29, 0.16);
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.78);
  box-shadow: 0 18px 44px rgba(24, 66, 39, 0.18);
  transform: rotate(3deg);
}

.court-card-label { margin-bottom: 28px; color: var(--pine); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.court-card-date { margin-bottom: 0; font-family: Georgia, serif; font-size: 2.25rem; line-height: 1.05; }
.court-card-time { margin-bottom: 20px; font-weight: 700; }
.court-card-note { color: #4d6354; font-size: 0.88rem; }

.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-block: 80px; }
.highlights article { padding: 28px 0; border-top: 2px solid var(--leaf); }
.highlights strong { display: block; margin-bottom: 10px; font-size: 1.25rem; }
.highlights span { color: #53645a; }

.about { padding: 88px 8%; border-radius: 28px; background: var(--cream); }
.about > p:last-child { max-width: 610px; color: #53645a; font-size: 1.1rem; }

.join { margin-block: 80px; padding: 78px 8%; border-radius: 28px; background: var(--pine); color: var(--paper); text-align: center; }
.join .eyebrow { color: #b6d697; }
.join h2 { margin-inline: auto; }
.join p { margin-bottom: 28px; }

footer { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 38px; color: #647269; font-size: 0.88rem; }

@media (max-width: 720px) {
  .site-header { min-height: 72px; }
  .brand { font-size: 0.88rem; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 40px; padding: 64px 28px; }
  .court-card { max-width: 320px; transform: none; }
  .highlights { grid-template-columns: 1fr; gap: 0; padding-block: 54px; }
  .about, .join { padding: 58px 28px; }
  footer { flex-direction: column; }
}