@font-face{
  font-family:Badger;
  src:url('/fonts/badger.woff2') format('woff2'),
      url('/fonts/badger.woff') format('woff');
  font-display:swap;
}

:root{
  --page:#d2d9ee;
  --heading:#6976c8;
  --gold:#b39c67;
  --teaching:#b85ab6;
}

*{box-sizing:border-box}

html{
  background:var(--page);
  scroll-behavior:smooth;
}

body{
  margin:0;
}

.school-page{
  background:var(--page);
  color:#111;
  font-family:Georgia,'Times New Roman',serif;
}

/* Full cover artwork with separate logo, matching the parents page. */
.school-hero{
  position:relative;
  overflow:hidden;
  background:var(--page);
}

.school-hero-image{
  display:block;
  width:100%;
  height:auto;
}

.school-hero-logo{
  position:absolute;
  top:3.8%;
  left:50%;
  z-index:2;
  width:min(31vw,590px);
  height:auto;
  transform:translateX(-50%);
}

/* Snowy transition from the cover artwork into the page background. */
.school-hero::before{
  content:"";
  position:absolute;
  left:-3%;
  right:-3%;
  bottom:-1%;
  height:13%;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      to bottom,
      rgba(210,217,238,0) 0%,
      rgba(210,217,238,.20) 24%,
      rgba(210,217,238,.62) 62%,
      var(--page) 100%
    );
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.school-page main{
  width:min(1050px,85vw);
  margin:0 auto;
  padding:0 0 80px;
}

.school-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  margin:24px 0 64px;
}

.school-actions a,
.school-page .back a{
  display:inline-block;
  text-align:center;
  color:#fff;
  text-decoration:none;
  padding:.86rem 1.35rem;
  border-radius:11px;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
  font-size:clamp(1rem,2vw,1.35rem);
}

.school-purchase{
  background:var(--gold);
}

.teaching-login{
  background:var(--teaching);
}

.school-page section{
  margin:0 0 66px;
}

.school-page h1,
.school-page h2{
  color:var(--heading);
  font-weight:400;
  line-height:1.08;
  margin:0 0 22px;
  font-size:clamp(2rem,4vw,3rem);
}

.school-page h3{
  color:#111;
  font-size:clamp(1.15rem,2vw,1.45rem);
  line-height:1.25;
  margin:34px 0 16px;
}

.school-page p{
  font-size:clamp(1rem,1.75vw,1.35rem);
  line-height:1.48;
  margin:0 0 26px;
}

.school-page section>img{
  display:block;
  width:min(100%,980px);
  height:auto;
  margin:46px auto 58px;
}

.journal-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:40px;
}

.journal-grid img{
  display:block;
  width:100%;
  height:auto;
}

.school-section{
  margin-bottom:72px;
}

.school-section h2{
  margin-bottom:24px;
}

.school-section ul{
  max-width:920px;
  margin:24px auto 34px;
  padding-left:1.4rem;
  font-size:clamp(1rem,1.65vw,1.25rem);
  line-height:1.5;
}

.school-section li{
  margin-bottom:12px;
}

.centred-list{
  list-style:none;
  padding-left:0 !important;
  text-align:center;
}

.centred-list li{
  margin-bottom:20px;
  font-weight:700;
}

.feature-art{
  display:block;
  margin:46px auto 0;
}

.narrow-art{
  width:min(620px,75%) !important;
}

.snowflake-divider{
  display:block;
  width:min(100%,1000px);
  margin:42px auto 0;
}

.school-page .back{
  margin-top:65px;
  text-align:center;
}

.school-page .back a{
  min-width:88px;
  background:var(--gold);
}

/* Clean footer: the wording is HTML only, not duplicated in the artwork. */
.site-footer{
  min-height:360px;
  background:
    linear-gradient(
      to bottom,
      var(--page) 0%,
      rgba(210,217,238,.55) 22%,
      rgba(210,217,238,0) 62%
    ),
    url('/school/assets/hero-05-fade.jpg') center bottom/cover no-repeat;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 20px 28px;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}

@media(max-width:700px){
  .school-hero-logo{
    top:2.8%;
    width:min(48vw,360px);
  }

  .school-hero::before{
    height:11%;
  }

  .school-page main{
    width:min(92vw,620px);
    padding-bottom:55px;
  }

  .school-actions{
    gap:15px;
    margin:18px 0 48px;
  }

  .school-actions a{
    width:min(100%,320px);
  }

  .school-page section{
    margin-bottom:50px;
  }

  .school-page section>img{
    margin:32px auto 42px;
  }

  .journal-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .school-section{
    margin-bottom:54px;
  }

  .centred-list li{
    margin-bottom:14px;
  }

  .narrow-art{
    width:min(100%,520px) !important;
  }

  .site-footer{
    min-height:260px;
    font-size:.78rem;
  }
}

.site-footer a{
  color:inherit;
  text-decoration:none;
}

.site-footer a:hover,
.site-footer a:focus-visible{
  text-decoration:underline;
}