@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;
}

*{box-sizing:border-box}
html{background:var(--page);scroll-behavior:smooth}
body{margin:0}

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

.parents-hero{
  position:relative;
  overflow:hidden;
  background:var(--page);
}

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

/* Recreates the spacing and scale of the old hero-01 image without
   baking the logo into the landscape artwork. */
.parents-hero-logo{
  position:absolute;
  top:3.8%;
  left:50%;
  z-index:2;
  width:min(31vw,590px);
  height:auto;
  transform:translateX(-50%);
}

/* Soft snowy transition from the original cover into the page blue. */
.parents-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);
}

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

.parents-page .purchase{
  text-align:center;
  margin:24px 0 62px;
}

.parents-page .purchase a,
.parents-page .back a{
  display:inline-block;
  background:var(--gold);
  color:#fff;
  text-decoration:none;
  padding:.8rem 1.25rem;
  border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
  font-size:clamp(1rem,2vw,1.35rem);
}

.parents-page section{margin:0 0 66px}

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

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

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

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

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

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

.parents-page .back a{
  min-width:88px;
  text-align:center;
}

/* Uses the clean fade image, so no footer wording is baked into the JPG. */
.parents-page .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('/parents/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){
  .parents-hero-logo{
    top:2.8%;
    width:min(48vw,360px);
  }

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

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

  .parents-page .purchase{margin:18px 0 46px}
  .parents-page section{margin-bottom:50px}
  .parents-page section>img{margin:32px auto 42px}
  .parents-page .journal-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .parents-page .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;
}