/* RC15.55 FINAL QA — non-visual stability safeguards only */
html, body { max-width: 100%; }
img { max-width: 100%; }
@media (min-width: 900px) and (max-width: 1399px){
  .exact-epilogue__frame{
    overflow:hidden;
  }
}


/* RC15.57 — bilingual accessibility polish */
.the-spark__from-wrap{
  margin:0 0 52px;
  text-align:center;
}
.the-spark__from-wrap .the-spark__from{
  margin:0;
  font-size:clamp(24px,2.15vw,34px);
  line-height:1.35;
  color:#8aa0b8;
}
.the-spark__from-ko{
  margin:12px 0 0;
  color:#70879d;
  font-size:clamp(13px,.95vw,16px);
  line-height:1.55;
  letter-spacing:-.015em;
  opacity:0;
  transform:translateY(14px);
}
.the-spark.is-active .the-spark__from-ko{
  animation:sparkReveal .85s ease .22s forwards;
}
.epilogue__since-wrap{
  margin:clamp(28px,3.5vh,42px) 0 0;
}
.epilogue__since-wrap .epilogue__since{
  margin:0!important;
}
.epilogue__since-ko{
  margin:10px 0 0;
  color:#71899f;
  font-size:clamp(11px,.82vw,14px);
  line-height:1.5;
  letter-spacing:-.01em;
}
.epilogue__next-wrap{
  margin:0;
}
.epilogue__next-wrap .epilogue__next{
  margin:0!important;
}
.epilogue__next-ko{
  margin:8px 0 0;
  color:#5f758a;
  font-size:clamp(12px,.92vw,15px);
  line-height:1.5;
}
@media (max-width:700px){
  .the-spark__from-wrap{margin-bottom:38px}
  .the-spark__from-wrap .the-spark__from{font-size:clamp(22px,7vw,29px)}
  .the-spark__from-ko{font-size:13px}
}


/* RC15.58 — generation message bilingual support */
.generation-mentor-ko{
  display:block;
  margin-top:10px;
  color:#70879d;
  font-size:clamp(12px,.9vw,15px);
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.015em;
}
.generation-statement-ko{
  margin:clamp(24px,3vh,36px) auto 0;
  max-width:980px;
  color:#7f96ac;
  font-size:clamp(14px,1.05vw,18px);
  font-weight:400;
  line-height:1.7;
  letter-spacing:-.018em;
  text-align:left;
}
@media (max-width:800px){
  .generation-mentor-ko{
    margin-top:8px;
    font-size:12px;
  }
  .generation-statement-ko{
    margin-top:20px;
    max-width:92%;
    font-size:13px;
    line-height:1.65;
  }
}


/* RC15.59 — Learning Together → image scene seamless transition
   Remove the hard horizontal cut and let the next image emerge through a dark-navy fade. */

/* The Learning Together transition is allowed to visually flow into the next scene. */
.scene-transition{
  position:relative;
  z-index:3;
  border-bottom:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Soften the bottom of the transition instead of ending it on a hard edge. */
.scene-transition::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-150px;
  height:190px;
  pointer-events:none;
  z-index:5;
  background:linear-gradient(
    to bottom,
    #071727 0%,
    rgba(7,23,39,.96) 18%,
    rgba(7,23,39,.78) 45%,
    rgba(7,23,39,.36) 72%,
    rgba(7,23,39,0) 100%
  );
}

/* Let the following visual scene begin underneath the fade,
   creating continuity rather than a slide-to-slide seam. */
.scene-transition + section{
  position:relative;
  z-index:1;
  margin-top:-120px!important;
  padding-top:120px!important;
  border-top:0!important;
}

/* Any hero/image at the top of that next scene fades in from navy. */
.scene-transition + section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:155px;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    #071727 0%,
    rgba(7,23,39,.88) 24%,
    rgba(7,23,39,.52) 58%,
    rgba(7,23,39,0) 100%
  );
}

/* Slightly reduce the excessive empty tail while keeping breathing room. */
.scene-transition .scene-transition__inner{
  padding-bottom:clamp(110px,14vh,170px)!important;
}

@media (max-width:800px){
  .scene-transition::after{
    bottom:-110px;
    height:145px;
  }
  .scene-transition + section{
    margin-top:-88px!important;
    padding-top:88px!important;
  }
  .scene-transition + section::before{
    height:120px;
  }
}


/* RC15.60 — final seamless Learning Together transition
   Goal: no visible horizontal seam. The classroom image should emerge from
   the navy field in the same way the following content already fades naturally. */

.scene-transition{
  position:relative;
  z-index:3;
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  background:#071727!important;
}

/* Long navy veil extending over the top of the next photographic scene. */
.scene-transition::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-230px;
  height:300px;
  z-index:20;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    #071727 0%,
    #071727 12%,
    rgba(7,23,39,.97) 26%,
    rgba(7,23,39,.86) 43%,
    rgba(7,23,39,.62) 60%,
    rgba(7,23,39,.32) 77%,
    rgba(7,23,39,.10) 91%,
    rgba(7,23,39,0) 100%
  );
}

/* Pull the photographic scene behind the previous scene rather than starting
   it on a new horizontal line. */
.scene-transition + section{
  position:relative;
  z-index:1;
  margin-top:-190px!important;
  padding-top:190px!important;
  border:0!important;
  border-top:0!important;
  box-shadow:none!important;
  overflow:hidden;
}

/* A second local fade prevents the image container itself from exposing
   a rectangular top edge. */
.scene-transition + section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:270px;
  z-index:15;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    #071727 0%,
    rgba(7,23,39,.96) 18%,
    rgba(7,23,39,.76) 40%,
    rgba(7,23,39,.45) 62%,
    rgba(7,23,39,.18) 82%,
    rgba(7,23,39,0) 100%
  );
}

/* Remove accidental borders from the first media element in the next scene. */
.scene-transition + section img,
.scene-transition + section picture,
.scene-transition + section video{
  border-top:0!important;
  outline:0!important;
}

/* Keep enough breathing room for the title, but reduce the empty hard-ending zone. */
.scene-transition .scene-transition__inner{
  padding-bottom:clamp(82px,10vh,128px)!important;
}

@media (max-width:800px){
  .scene-transition::after{
    bottom:-165px;
    height:220px;
  }
  .scene-transition + section{
    margin-top:-135px!important;
    padding-top:135px!important;
  }
  .scene-transition + section::before{
    height:205px;
  }
}


/* ============================================================
   RC15.61 — TRUE SEAMLESS LEARNING
   Actual DOM boundary:
   .scene01__transition  →  #learning.scene02
   ============================================================ */

/* The transition scene remains the foreground navy field. */
.scene01__transition{
  position:relative!important;
  z-index:5!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 50% 36%,rgba(37,99,235,.20),transparent 31%),
    #071727!important;
}

/* Instead of a hard ending, its lower edge dissolves over the incoming photo. */
.scene01__transition::after{
  content:"";
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  bottom:-240px;
  height:310px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    #071727 0%,
    #071727 12%,
    rgba(7,23,39,.97) 28%,
    rgba(7,23,39,.84) 46%,
    rgba(7,23,39,.59) 64%,
    rgba(7,23,39,.30) 80%,
    rgba(7,23,39,.08) 93%,
    rgba(7,23,39,0) 100%
  );
}

/* This is the actual next section. Remove its built-in horizontal rule,
   then physically move it behind the end of the transition scene. */
#learning.scene02{
  position:relative!important;
  z-index:2!important;
  margin-top:-210px!important;
  border-top:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* The hero is allowed to begin immediately beneath the overlapping transition. */
#learning .scene02__hero{
  min-height:100vh!important;
  overflow:hidden!important;
  border-top:0!important;
}

/* Remove any rectangular edge from the media container. */
#learning .scene02__hero-media{
  top:0!important;
  border:0!important;
}

/* The photo itself receives a long top fade so there is no visible starting line. */
#learning .scene02__hero-media::before{
  content:"";
  position:absolute;
  z-index:3;
  inset:0 0 auto 0;
  height:360px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    #071727 0%,
    rgba(7,23,39,.98) 14%,
    rgba(7,23,39,.88) 32%,
    rgba(7,23,39,.66) 51%,
    rgba(7,23,39,.40) 68%,
    rgba(7,23,39,.17) 84%,
    rgba(7,23,39,0) 100%
  );
}

/* Keep the existing left/bottom cinematic shading above the image,
   but below the text content. */
#learning .scene02__hero-media::after{
  z-index:2!important;
}

/* Preserve readable copy above all fade layers. */
#learning .scene02__copy{
  z-index:6!important;
}

/* The previous transition had excessive blank space at its tail.
   Keep the title breathing room while letting the photograph begin sooner. */
.scene01__transition{
  min-height:61vh!important;
  padding-bottom:72px!important;
}

@media(max-width:800px){
  #learning.scene02{
    margin-top:-145px!important;
  }
  .scene01__transition::after{
    bottom:-175px;
    height:230px;
  }
  #learning .scene02__hero-media::before{
    height:260px;
  }
  .scene01__transition{
    min-height:58vh!important;
    padding-bottom:54px!important;
  }
}


/* ============================================================
   RC15.62 — LIGHTER LEARNING GRADIENT
   Keep the seamless transition, but reveal the student's face and upper body
   earlier by reducing overlay height and opacity.
   ============================================================ */

/* Previous scene fade: shorter and lighter */
.scene01__transition::after{
  bottom:-190px!important;
  height:245px!important;
  background:linear-gradient(
    to bottom,
    #071727 0%,
    rgba(7,23,39,.93) 18%,
    rgba(7,23,39,.72) 38%,
    rgba(7,23,39,.46) 58%,
    rgba(7,23,39,.22) 76%,
    rgba(7,23,39,.07) 90%,
    rgba(7,23,39,0) 100%
  )!important;
}

/* Photo-side fade: significantly reduced so faces remain clear */
#learning .scene02__hero-media::before{
  height:235px!important;
  background:linear-gradient(
    to bottom,
    rgba(7,23,39,.90) 0%,
    rgba(7,23,39,.72) 18%,
    rgba(7,23,39,.48) 38%,
    rgba(7,23,39,.26) 58%,
    rgba(7,23,39,.10) 78%,
    rgba(7,23,39,0) 100%
  )!important;
}

/* Slightly less overlap than RC15.61 to preserve more of the photo */
#learning.scene02{
  margin-top:-170px!important;
}

/* Keep the title transition compact but comfortable */
.scene01__transition{
  min-height:59vh!important;
  padding-bottom:62px!important;
}

@media(max-width:800px){
  .scene01__transition::after{
    bottom:-145px!important;
    height:190px!important;
  }
  #learning.scene02{
    margin-top:-120px!important;
  }
  #learning .scene02__hero-media::before{
    height:180px!important;
  }
}


/* ============================================================
   RC15.63 — GENERATIONS / OSOF PEOPLE ARCHIVE
   ============================================================ */
.generations-section{
  position:relative;
  padding:clamp(110px,12vw,190px) clamp(28px,6vw,110px);
  background:
    radial-gradient(circle at 75% 22%,rgba(34,211,238,.08),transparent 28%),
    #071727;
  color:#f7fbff;
  overflow:hidden;
}
.generations-section::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,23,39,0),rgba(7,23,39,.25) 50%,rgba(7,23,39,.9));
}
.generations-shell{position:relative;z-index:1;max-width:1500px;margin:0 auto}
.generations-head{max-width:900px;margin-bottom:clamp(55px,7vw,100px)}
.generations-kicker{
  margin:0 0 18px;color:#28d9f5;font-size:12px;font-weight:700;
  letter-spacing:.28em;
}
.generations-head h2{
  margin:0;font-size:clamp(72px,10vw,160px);line-height:.84;
  letter-spacing:-.065em;font-weight:750;
}
.generations-lead{
  margin:32px 0 8px;font-size:clamp(22px,2.1vw,34px);
  color:#a9c0db;letter-spacing:-.02em;
}
.generations-ko{margin:0;color:#7697bb;font-size:15px}
.generations-layout{
  display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.8fr);
  gap:24px;align-items:stretch;
}
.generation-tabs{
  border:1px solid rgba(132,167,204,.22);
  border-radius:22px;overflow:hidden;background:rgba(5,17,30,.42);
}
.generation-tab{
  width:100%;min-height:92px;padding:18px 22px;
  display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;
  color:#7394b7;background:transparent;border:0;
  border-bottom:1px solid rgba(132,167,204,.14);
  text-align:left;cursor:pointer;transition:.25s ease;
}
.generation-tab:last-child{border-bottom:0}
.generation-tab span{font:700 11px/1 monospace;color:#28d9f5}
.generation-tab strong{font-size:20px;color:inherit}
.generation-tab small{font-size:11px;color:#56799e}
.generation-tab:hover,.generation-tab.is-active{
  background:rgba(20,62,99,.32);color:#fff;
}
.generation-tab.is-active{box-shadow:inset 3px 0 0 #28d9f5}
.generation-panel{
  min-height:480px;border:1px solid rgba(132,167,204,.22);
  border-radius:22px;padding:clamp(28px,4vw,58px);
  background:linear-gradient(145deg,rgba(14,42,72,.62),rgba(5,18,31,.72));
}
.generation-panel__meta{display:flex;gap:24px;align-items:flex-start}
.generation-panel__no{
  color:#28d9f5;font:700 13px/1 monospace;letter-spacing:.15em;padding-top:9px
}
.generation-panel__year{margin:0 0 9px;color:#7fa1c4;font-size:13px;letter-spacing:.12em}
.generation-panel h3{
  margin:0;font-size:clamp(32px,4vw,62px);line-height:.98;letter-spacing:-.045em
}
.generation-panel__desc{
  max-width:760px;margin:28px 0 40px;color:#a8bdd3;font-size:16px;line-height:1.8
}
.generation-placeholder{
  min-height:190px;border:1px dashed rgba(40,217,245,.28);
  border-radius:18px;padding:30px;display:flex;flex-direction:column;justify-content:center
}
.generation-placeholder span{color:#28d9f5;font-size:10px;letter-spacing:.24em}
.generation-placeholder strong{margin-top:10px;font-size:25px}
.generation-placeholder p{margin:8px 0 0;color:#6f91b4;font-size:13px}
@media(max-width:900px){
  .generations-layout{grid-template-columns:1fr}
  .generation-tabs{display:flex;overflow-x:auto}
  .generation-tab{min-width:160px;grid-template-columns:30px 1fr;grid-template-rows:auto auto}
  .generation-tab small{grid-column:2}
}

/* RC15.64 — actual Generations roster and Q-column major activities */
.generation-tabs{max-height:690px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(40,217,245,.38) transparent}
.generation-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.generation-member{min-height:132px;padding:22px 24px;border:1px solid rgba(132,167,204,.18);border-radius:16px;background:rgba(5,18,31,.46);transition:.2s ease}
.generation-member:hover{transform:translateY(-2px);border-color:rgba(40,217,245,.35);background:rgba(11,34,57,.62)}
.generation-member__top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.generation-member h4{margin:0;color:#f6fbff;font-size:20px;font-weight:650;letter-spacing:-.025em}
.generation-member__status{flex:0 0 auto;padding:5px 9px;border:1px solid rgba(40,217,245,.2);border-radius:999px;color:#75dff0;font-size:10px;letter-spacing:.08em}
.generation-member__activity{margin:13px 0 0;color:#8fa9c3;font-size:13px;line-height:1.62}
.generation-member__activity--empty{color:#526f8d}
.generation-empty{color:#7894b0}
@media(max-width:900px){.generation-tabs{max-height:none;overflow-x:auto;overflow-y:hidden}.generation-members{grid-template-columns:1fr}}