@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Nunito:wght@300;400;600&display=swap');

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  --green:       #1B5E38;
  --green-light: #2a7d4f;
  --orange:      #F5A020;
  --navy:        #1A2066;
  --cream:       #F9F6F0;
  --warm-white:  #FFFCF7;
  --shadow:      rgba(27, 94, 56, 0.12);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ───────────────────────────────────────────────── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--warm-white);
  color: var(--navy);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* subtle grain texture */
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(245,160,32,.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(27,94,56,.06) 0%, transparent 60%);
}

/* ── Page load fade-in ──────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1);   }
}

/* ── Header / brand strip ───────────────────────────────── */
.site-header {
  width: 100%;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid rgba(27, 94, 56, .10);
  animation: fadeUp .6s ease both;
}

.site-header .brand-tag {
  font-family: 'Cormorant Garamond', serif;
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  opacity: .7;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem 5rem;
  text-align: center;
  gap: 2.5rem;
}

/* ── Logo wrapper ───────────────────────────────────────── */
.logo-wrapper {
  position: relative;
  animation: scaleIn .8s cubic-bezier(.16,1,.3,1) .2s both;
}

/* decorative ring behind the logo */
.logo-wrapper::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 160, 32, .22);
  animation: fadeUp .9s ease .5s both;
}

.logo-wrapper::after {
  content: '';
  position: absolute;
  inset: -36px;
  border-radius: 50%;
  border: 1px solid rgba(27, 94, 56, .10);
  animation: fadeUp .9s ease .65s both;
}

.school-logo {
  display: block;
  width: clamp(160px, 30vw, 300px);
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  filter: drop-shadow(0 12px 40px var(--shadow));
  transition: transform .4s cubic-bezier(.16,1,.3,1), filter .4s ease;
}

.school-logo:hover {
  transform: scale(1.04) translateY(-4px);
  filter: drop-shadow(0 20px 48px rgba(27,94,56,.18));
}

/* ── Text block ─────────────────────────────────────────── */
.hero-text {
  animation: fadeUp .7s ease .4s both;
  max-width: 560px;
}

.hero-text h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.hero-text h1 span {
  color: var(--green);
}

.hero-text .tagline {
  margin-top: .6rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 400;
  color: var(--orange);
  letter-spacing: .04em;
}

.hero-text .sub {
  margin-top: .5rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(.85rem, 1.8vw, 1rem);
  color: var(--green);
  opacity: .75;
  letter-spacing: .03em;
}

/* ── Divider ────────────────────────────────────────────── */
.ornament {
  display: flex;
  align-items: center;
  gap: .9rem;
  animation: fadeUp .7s ease .55s both;
}

.ornament span {
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange));
}

.ornament span:last-child {
  background: linear-gradient(90deg, var(--orange), transparent);
}

.ornament .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  width: auto;
  height: auto;
  font-size: .5rem;
  color: var(--orange);
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  width: 100%;
  padding: 1.5rem 2rem;
  text-align: center;
  font-size: .75rem;
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  opacity: .5;
  border-top: 1px solid rgba(27,94,56,.08);
  animation: fadeUp .6s ease .7s both;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero {
    padding: 3rem 1rem 4rem;
    gap: 2rem;
  }

  .school-logo {
    width: clamp(320px, 60vw, 600px);
  }

  .logo-wrapper::before,
  .logo-wrapper::after {
    display: none;
  }
}