/* Approved homepage composition; theme pages retain prototype.css. */
body.homepage { background: #f7f9f7; }
body.homepage::before { display: none; }
.homepage .prototype-container { width: min(calc(100% - 80px), 1240px); }
.homepage .topbar { height: 72px; min-height: 72px; margin-bottom: -72px; padding: 12px max(40px, calc((100vw - 1240px) / 2)); background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); border-color: rgba(255,255,255,.42); transition: background .2s; }
.homepage .topbar.past-campus { background: rgba(255,255,255,.92); border-color: #dfe7e1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .homepage .topbar { background: rgba(255,255,255,.96); } }
.homepage .site-nav a { font-size: 14px; }
.homepage .topbar { position: fixed; left: 0; right: 0; margin-bottom: 0; }
#homeView .prototype-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: max(670px, 86svh); background: #deedf2; border: 0; padding-top: 72px; }
.campus-backdrop { position: absolute; z-index: -2; inset: -14px 0; transform: translateY(var(--campus-shift, 0px)); }
.campus-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 54%; }
#homeView .prototype-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(250,253,250,.89), rgba(250,253,250,.80) 22%, rgba(250,253,250,.24) 43%, transparent 62%); pointer-events: none; }
#homeView .hero-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex: 1; padding: 110px 0 60px; }
#homeView .hero-copy { max-width: 570px; }
#homeView .hero-copy .section-label { font-size: 14px; margin-bottom: 20px; color: #28694e; }
#homeView .hero-inner h1 { max-width: none; margin: 0; font-size: 68px; line-height: 1.09; font-weight: 650; color: #111d18; }
#homeView .hero-inner h1 span { white-space: nowrap; }
#homeView .hero-lead { font-size: 23px; line-height: 1.7; color: #233c30; margin-top: 28px; }
#homeView .hero-cta { margin-top: 32px; padding: 14px 28px; border-radius: 28px; font-size: 15px; font-weight: 550; }
#homeView .hero-cta span { transition: transform .2s; }
#homeView .hero-cta:hover span { transform: translateX(4px); }
.campus-motto { margin: 0 6% 0 0; padding-top: 4px; font-size: 25px; line-height: 1.8; color: #285d46; font-weight: 400; }
.hero-bottom { width: 100%; background: linear-gradient(90deg, rgba(248,253,249,.80), rgba(248,253,249,.34) 60%, transparent); }
.hero-bottom > div { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#homeView .hero-meta { margin: 0; padding: 25px 0; border: 0; gap: 0; color: #245f47; font-size: 15px; font-weight: 550; }
#homeView .hero-meta span { padding: 8px 36px; }
#homeView .hero-meta span:first-child { padding-left: 0; }
#homeView .hero-meta span + span { border-left: 1px solid #8dae9d; }
.explore-link { color: #163c2e; text-decoration: none; font-size: 13px; white-space: nowrap; padding: 12px 0; }
.explore-link span { margin-left: 12px; }
#homeView .current-course-section { padding: 70px 0 60px; background: #f7f9f7; scroll-margin-top: 82px; }
#homeView .editorial-heading { margin-bottom: 32px; gap: 24px; }
#homeView .editorial-heading h2 { font-size: 44px; font-weight: 600; }
#homeView .editorial-heading > p { font-size: 14px; }
#homeView .grade-stories { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; border: 0; }
#homeView .grade-story { display: grid; grid-template-columns: minmax(0,1.48fr) minmax(0,1fr); min-height: 390px; overflow: hidden; border: 1px solid #e0e8e2; border-radius: 12px; background: #fcfdfb; box-shadow: 0 2px 10px rgba(35,70,47,.025); }
#homeView .grade-story .story-media { grid-column: 2; grid-row: 1; height: 100%; min-height: 0 !important; border-radius: 0; border: 0; }
#homeView .story-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
#homeView .story-media::after { display: none; }
#homeView .grade-story .story-copy { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-width: 0; padding: 30px 22px 24px; }
#homeView .story-copy .section-label { margin-bottom: 24px; font-size: 17px; color: #1b3025; font-weight: 600; }
#homeView .story-copy h3 { font-size: 27px; font-weight: 600; line-height: 1.4; margin: 0 0 16px; overflow-wrap: anywhere; }
#homeView .story-copy > p:not(.section-label) { font-size: 13px; line-height: 1.8; color: #6b776f; margin: 0 0 16px; }
#homeView .story-stats { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; border: 0; padding: 12px 0 22px; margin: auto 0 0; }
#homeView .story-stats span { padding: 4px 10px; border-radius: 16px; font-size: 12px; background: #edf3ee; color: #4c6658; }
#homeView .story-copy .text-link { margin-top: auto; padding-bottom: 0; border: 0; font-size: 14px; line-height: 1.5; }
#homeView .story-status { margin-top: auto; color: #28634a; font-size: 13px; }
#homeView .story-media .media-caption, #homeView .story-media .media-mark { display: none; }
#homeView .archive-section { scroll-margin-top: 82px; }
#homeView .brand-banner { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 520px; overflow: hidden; background: #f2f5ef; }
#homeView .brand-banner > img { position: absolute; z-index: -2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 64% 55%; }
#homeView .brand-banner::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(249,252,247,.85), rgba(249,252,247,.68) 26%, transparent 58%); }
#homeView .belief-copy { padding: 80px 0; max-width: 500px; }
#homeView .belief-copy h2 { margin: 22px 0; color: #162b1e; font-size: 42px; line-height: 1.3; font-weight: 600; }
#homeView .belief-copy > p:last-child { font-size: 16px; color: #3b5142; line-height: 1.9; }
#homeView .archive-section { padding: 64px 0 72px; background: #f9fbf9; }
#homeView .directory-tools { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
#homeView .theme-directory { display: grid; gap: 30px; }
#homeView .age-group { grid-template-columns: 160px minmax(0,1fr); }
#homeView .age-label { color: #1c6447; border-top: 2px solid #208154; }
#homeView .theme-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 30px; padding-left: 30px; }
#homeView .theme-row { grid-template-columns: 88px minmax(0,1fr) 20px; min-height: 66px; padding: 15px 0; gap: 10px; }
#homeView .theme-name { margin: 0; grid-column: 2; grid-row: 1; }
#homeView .theme-month { grid-column: 1; grid-row: 1; font-family: inherit; }
#homeView .theme-arrow { grid-column: 3; grid-row: 1; width: 20px; }
#homeView .theme-name strong { font-size: 14px; line-height: 1.6; }
#homeView .theme-name small { display: none; }
#homeView .theme-month { font-size: 12px; }
.homepage a:focus-visible, .homepage button:focus-visible { outline: 2px solid #075734; outline-offset: 4px; }
@keyframes campus-enter { from { transform: scale(1.025); } to { transform: scale(1); } }
@keyframes campus-copy-enter { from { transform: translateY(12px); opacity: .3; } to { transform: none; opacity: 1; } }
.campus-ready .campus-backdrop img { animation: campus-enter 1s ease-out; }
.campus-ready .hero-copy { animation: campus-copy-enter .65s ease-out; }
@media (max-width: 1100px) {
  #homeView .hero-inner h1 { font-size: 60px; }
  .campus-motto { margin-right: 0; font-size: 21px; }
  #homeView .grade-stories { gap: 14px; }
  #homeView .grade-story .story-copy { padding: 24px 16px; }
  #homeView .story-copy h3 { font-size: 23px; }
}
@media (max-width: 820px) {
  .homepage .prototype-container { width: calc(100% - 40px); }
  .homepage .topbar { padding: 10px 20px; height: 104px; min-height: 104px; margin-bottom: 0; flex-wrap: wrap; gap: 8px; }
  .homepage .brand-logo { width: 34px; height: 34px; }
  .homepage .brand-copy strong { font-size: 14px; }
  .homepage .brand-copy small { display: none; }
  .homepage .site-nav { width: 100%; justify-content: space-between; gap: 16px; }
  .homepage .site-nav a:not(.nav-upload) { display: block; }
  .homepage .site-nav .nav-upload { padding: 5px 10px; }
  #homeView .prototype-hero { min-height: max(720px, 88svh); padding-top: 104px; }
  #homeView .hero-inner { padding: 62px 0 110px; display: block; }
  #homeView .hero-inner h1 { font-size: 46px; line-height: 1.12; }
  #homeView .hero-lead { font-size: 18px; line-height: 1.8; margin-top: 22px; }
  #homeView .hero-copy .section-label { font-size: 12px; margin-bottom: 16px; }
  #homeView .hero-cta { font-size: 14px; padding: 13px 24px; margin-top: 24px; }
  .campus-motto { display: none; }
  .campus-backdrop img { object-position: 32% 50%; }
  #homeView .prototype-hero::before { background: linear-gradient(90deg, rgba(250,253,250,.84), rgba(250,253,250,.64) 45%, rgba(250,253,250,.05) 90%); }
  #homeView .hero-meta { font-size: 13px; padding: 20px 0; flex-wrap: nowrap; width: 100%; justify-content: space-between; }
  #homeView .hero-meta span, #homeView .hero-meta span + span { padding: 6px 14px; width: auto; }
  #homeView .hero-meta span:first-child { padding-left: 0; }
  #homeView .hero-meta span:last-child { padding-right: 0; }
  .explore-link { display: none; }
  #homeView .current-course-section { padding: 46px 0; scroll-margin-top: 114px; }
  #homeView .editorial-heading { display: block; }
  #homeView .editorial-heading h2 { font-size: 34px; }
  #homeView .editorial-heading > p { margin-top: 14px; font-size: 13px; }
  #homeView .grade-stories { grid-template-columns: 1fr; gap: 18px; }
  #homeView .grade-story { min-height: 320px; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); }
  #homeView .grade-story .story-copy { padding: 25px 20px; }
  #homeView .story-copy h3 { font-size: 26px; }
  #homeView .story-copy .section-label { margin-bottom: 16px; }
  #homeView .archive-section { scroll-margin-top: 114px; }
  #homeView .brand-banner { align-items: flex-start; min-height: 570px; }
  #homeView .brand-banner > img { object-position: 65% 50%; }
  #homeView .brand-banner::before { background: linear-gradient(180deg, rgba(249,252,247,.95), rgba(249,252,247,.82) 37%, rgba(249,252,247,.05) 76%); }
  #homeView .belief-copy { padding: 44px 0; }
  #homeView .belief-copy h2 { font-size: 30px; }
  #homeView .belief-copy > p:last-child { font-size: 14px; }
  #homeView .archive-section { padding: 46px 0; }
  #homeView .age-group { display: block; }
  #homeView .theme-grid { grid-template-columns: 1fr; padding-left: 0; border-left: 0; background: transparent; gap: 0; }
  #homeView .theme-row { display: grid; grid-template-columns: 78px minmax(0,1fr) 18px; min-height: 62px; background: transparent; padding: 12px 0; }
  #homeView .theme-arrow { display: block; }
  #homeView .theme-month { margin: 0; }
}
@media (max-width: 359px) {
  #homeView .hero-inner h1 { font-size: 40px; }
  #homeView .grade-story .story-copy { padding: 22px 14px; }
  #homeView .story-copy h3 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .campus-ready .campus-backdrop img, .campus-ready .hero-copy { animation: none; }
  .campus-backdrop { transform: none; }
}