/* Premium polish: responsive resilience + missing-image fallbacks */

html,body{
  max-width:100%;
  overflow-x:hidden;
}

.wrap,
.header .wrap,
.footer-main,
.footer-bottom,
.pagehead-content,
.hero-copy,
.section,
.article,
.article-detail,
.article-single{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.wrap{
  width:min(1240px,100%);
  margin-inline:auto;
  padding-inline:clamp(20px,4.5vw,48px);
}

.pagehead:after{
  inset:clamp(12px,2.5vw,18px);
}

.subnav{
  max-width:100%;
  box-sizing:border-box;
}

.pagehead:before{
  background-image:
    linear-gradient(90deg,rgba(11,40,32,.83),rgba(14,49,39,.36),rgba(14,49,39,.1)),
    var(--page-banner),
    var(--nopic-url,url(/static/images/nopic.png));
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#173f35;
}

/* Tighten list pages: less empty band above the footer */
.section.list-section,
.list-section{
  padding-top:48px;
  padding-bottom:40px;
}
.story-list-section{
  padding-top:52px;
  padding-bottom:48px;
}
.story-list-section .pager,
.list-section .pager,
.section .pager{
  margin-top:28px;
}
.subnav{
  margin-top:18px;
}

/* Homepage editorial: latest news feature with image + text */
.editorial-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
  gap:48px;
}
.editorial-feature{
  min-width:0;
}
.editorial-feature-media{
  display:block;
  overflow:hidden;
  margin:0 0 20px;
  background:linear-gradient(145deg,#e7eee6,#f4efe3);
}
.editorial-feature-media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.editorial-feature:hover .editorial-feature-media img{
  transform:scale(1.03);
}
.editorial-feature .kicker{
  margin-bottom:0;
}
.editorial-feature .title{
  margin:10px 0 12px;
  font-size:clamp(26px,2.8vw,38px);
  line-height:1.25;
}
.editorial-feature .title a:hover{
  color:var(--forest);
}
.editorial-feature .intro{
  margin:0 0 14px;
  max-width:36em;
}
.editorial-feature time{
  display:block;
  margin:0 0 20px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.04em;
}
.editorial-feature .button{
  margin-top:0;
}

/* Banner / hero: keep cover so they fill edge-to-edge (content cards use img + contain below) */

.card-image,
.story-media,
.home-path-media,
.home-class-media,
.home-about-media,
.home-growth-feature-media,
.home-story-media,
.editorial-feature-media{
  background:#e8eee7;
}

/* Content images: always show full picture, no crop */
.card-image img,
.story-media img,
.home-path-media,
.home-class-media,
.home-about-media img,
.home-growth-feature-media img,
.home-story-media img,
.editorial-feature-media img,
.article-body img,
.article-content img{
  display:block;
  width:100%;
  height:auto!important;
  max-width:100%;
  object-fit:contain;
}

.article-body img,
.article-content img{
  max-width:100%;
  height:auto;
}

.article-body table,
.article-content table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.pagehead-description,
.card h2,
.card h3,
.story-card h2,
.news a span{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.news a{
  min-width:0;
}

.news a span{
  flex:1 1 auto;
}

.news time{
  flex:0 0 auto;
}

.card-image img,
.story-media img{
  background:#e8eee7;
}

@media (max-width:1120px){
  .section-heading{gap:36px}
  .feature{gap:48px}
  .editorial-grid{gap:48px}
}

@media (max-width:900px){
  .hero{min-height:520px}
  .hero-copy{
    padding-inline:clamp(20px,4.5vw,40px);
    box-sizing:border-box;
  }
  .hero h1{font-size:clamp(32px,5.5vw,46px);line-height:1.22;overflow-wrap:anywhere}
  .hero .eyebrow{letter-spacing:.14em;overflow-wrap:anywhere}
  .card-body{padding:22px 20px 24px}
  .feature-image{min-height:340px}
  .pagehead{min-height:300px}
  .pagehead-content{padding-top:78px;padding-bottom:54px}
  .listing-grid{gap:20px}
}

@media (max-width:760px){
  .hero{height:auto;min-height:520px}
  .hero-copy{
    width:min(1240px,100%);
    max-width:100%;
    margin-inline:auto;
    box-sizing:border-box;
    padding:100px clamp(20px,5vw,48px) 88px;
  }
  .hero .eyebrow{
    max-width:100%;
    font-size:11px;
    letter-spacing:.12em;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .hero h1{
    max-width:100%;
    font-size:clamp(28px,7.2vw,38px);
    line-height:1.25;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .hero p{
    max-width:100%;
    font-size:15px;
    line-height:1.7;
    overflow-wrap:anywhere;
  }
  .hero .button{margin-top:24px;padding:12px 18px}
  .section{padding:58px 0}
  .section-heading,
  .feature,
  .editorial-grid,
  .facts{grid-template-columns:1fr}
  .editorial-feature-media{margin-bottom:16px}
  .editorial-feature .title{font-size:clamp(24px,7vw,32px)}
  .editorial-feature time{margin-bottom:16px}
  .grid,
  .listing-grid,
  .class-grid,
  .program-grid{grid-template-columns:1fr;gap:18px}
  .card-image img{height:220px}
  .feature-image{min-height:280px}
  .feature-image span{left:22px;bottom:22px}
  .pagehead{min-height:260px}
  .pagehead h1{font-size:clamp(28px,8vw,36px)}
  .pagehead p,
  .pagehead-description{font-size:14px;line-height:1.7}
  .subnav{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:18px 0 0;
    max-width:100%;
    overflow:visible;
  }
  .subnav a{flex:1 1 auto;white-space:normal}
  .article,
  .article-detail,
  .article-single{
    width:calc(100% - 40px);
    margin:28px auto 48px;
    padding:24px 18px;
  }
  .article-body,
  .article-content{font-size:15px;line-height:1.9}
  .article-body img,
  .article-content img{margin:20px auto;border-radius:2px}
  .news a{align-items:flex-start;gap:14px;padding:16px 0}
  .news time{white-space:nowrap}
  .compact-news a{flex-direction:column;align-items:flex-start}
}

@media (max-width:900px){
  .article-detail,.article-single,.article{
    width:calc(100% - 48px);
    margin:24px auto 40px;
    padding:22px 20px;
    min-height:0;
    box-shadow:none;
  }
  .article-body{
    font-size:15px;
    line-height:1.75;
    max-width:none;
  }
  .article-body>p{margin:0 0 .9em}
  .pagehead{min-height:280px}
  .pagehead-content{padding-top:64px;padding-bottom:40px}
  .pagehead h1{font-size:clamp(26px,4vw,36px)}
  .subnav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:14px 0 0;
    overflow:visible;
  }
  .subnav a{
    flex:none;
    text-align:center;
    white-space:normal;
  }
  .subnav a:last-child:nth-child(odd){grid-column:1/-1}
  .list-section,.story-list-section{padding-top:28px;padding-bottom:36px}
}

@media (prefers-reduced-motion:reduce){
  .card:hover,
  .story-card:hover,
  .button:hover,
  .hero-media,
  .card-image img,
  .story-media img,
  .back-top{transform:none;transition:none}
}

/* Back to top */
.back-top{
  position:fixed;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  z-index:90;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:0;
  padding:0;
  border:1px solid rgba(23,63,53,.18);
  border-radius:2px;
  background:rgba(255,253,248,.94);
  color:var(--forest);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(23,63,53,.12);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease,visibility .25s ease,transform .25s ease,background .2s ease,color .2s ease;
}
.back-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}
.back-top:hover,
.back-top:focus-visible{
  background:var(--forest);
  color:#fff;
  border-color:var(--forest);
}
@media (max-width:640px){
  .back-top{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom));
    width:42px;
    height:42px;
  }
}