/* ===== Homepage only. Loads after style.css and reuses its colors, fonts and buttons. ===== */

/* Hero: availability line for principals */
.status{position:relative;margin-top:22px;padding-left:22px;font-size:1rem;color:var(--ink2);max-width:54ch}
.status::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--pencil);animation:statuspulse 2.4s ease-out 3}
.status a{font-weight:600;text-decoration-color:var(--pencil);text-decoration-thickness:2px;text-underline-offset:4px}
@keyframes statuspulse{0%{box-shadow:0 0 0 0 rgba(232,178,48,.6)}70%,100%{box-shadow:0 0 0 12px rgba(232,178,48,0)}}

/* ===== Experience reel ===== */
.rv{margin-top:36px}
.rv-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rv-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0;background:none;border:0;cursor:pointer;text-align:left;color:var(--ink2);font:inherit}
.rv-yr{font:700 1.5rem/1.1 var(--head);letter-spacing:-.02em}
.rv-nm{font:600 .9rem var(--head);margin-bottom:8px}
.rv-bar{display:block;width:100%;height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:auto}
.rv-bar b{display:block;height:100%;background:var(--pencil);transform:scaleX(0);transform-origin:left}
.rv-tabs button:hover .rv-nm{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pencil);text-decoration-thickness:3px;text-underline-offset:4px}
.rv-tabs button[aria-selected="true"]{color:var(--ink)}
.rv-tabs button[aria-selected="true"] .rv-bar{background:#BCCBCB}

.rv-body{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:start;margin-top:28px}
.rv-stage{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden}
.rv-fig.ph{position:absolute;inset:0;aspect-ratio:auto;opacity:0;transition:opacity .6s ease}
.rv-fig.on{opacity:1}
.rv-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.rv-fig[data-fit="contain"] img{object-fit:contain;padding:8%}
.rv-fig.has-img{border-color:transparent;color:transparent}
.rv-tag{position:absolute;left:12px;bottom:12px;z-index:1;font:700 .8rem var(--head);background:var(--ink);color:var(--white);padding:4px 10px;border-radius:99px}

.rv-slides{display:grid}
.rv-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease,visibility 0s .45s;min-width:0}
.rv-slide.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.rv-meta{font:600 .9rem var(--head);color:var(--ink2);margin:0 0 6px}
.rv-slide h3{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.15em}
.rv-role{font-style:italic;color:var(--ink2);margin-bottom:14px}
.rv-slide p{font-size:1.02rem}
.rv-stat{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;border-top:4px solid var(--pencil);padding-top:12px;margin-top:20px!important}
.rv-stat b{font:700 clamp(1.9rem,4vw,2.7rem)/1 var(--head);letter-spacing:-.02em;white-space:nowrap}
.rv-stat>span{font-size:.95rem;line-height:1.4;color:var(--ink2)}
.rv-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px!important}
.rv-links .more{font-size:.95rem}

.rv-ctrl{display:flex;align-items:center;gap:10px;margin-top:22px}
.rv-btn{width:44px;height:44px;border-radius:50%;background:var(--white);border:3px solid var(--pencil);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(20,40,58,.2);transition:transform .15s}
.rv-btn:hover{transform:scale(1.08)}
.rv-btn:focus-visible,.rv-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.rv-toggle{font:700 .85rem var(--head);background:none;color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:6px 16px;cursor:pointer;min-width:78px;margin-left:6px}
.rv-toggle:hover{background:var(--paper)}
.rv-count{margin-left:auto;font:600 .85rem var(--head);color:var(--ink2)}
.rv-foot{margin-top:36px}

/* Without JavaScript, show every experience stacked */
.rv:not(.js) .rv-tabs,.rv:not(.js) .rv-ctrl{display:none}
.rv:not(.js) .rv-body{grid-template-columns:1fr}
.rv:not(.js) .rv-slides{gap:40px}
.rv:not(.js) .rv-slide{opacity:1;visibility:visible;transform:none;grid-area:auto}
.rv:not(.js) .rv-slide[hidden]{display:block}
.rv:not(.js) .rv-stage{display:none}

/* ===== "How I'd teach it" picker ===== */
.fx{margin-top:0}
.fx>h3{color:var(--white)}
.fx-hint{font-size:1rem;color:#C9D9D8;margin:0 0 16px}
.fx-panels{margin-top:22px;min-height:15em}
.fx-panel:not([hidden]){animation:fxin .4s ease}
.fx-panel h4{font:700 1.35rem/1.2 var(--head);color:var(--white);margin-bottom:10px}
.fx-panel p{font-size:1.02rem}
.fx-proof{border-left:4px solid var(--pencil);padding-left:14px;margin:16px 0 18px!important;color:#C9D9D8}
.fx-panel .more{margin-right:20px;color:#fff;text-decoration-color:var(--pencil)}
@keyframes fxin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:820px){
  .rv-tabs{grid-template-columns:1fr 1fr;gap:16px 14px}
  .rv-body{grid-template-columns:1fr;gap:24px}
  .rv-stage{aspect-ratio:16/10}
  .fx-panels{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .status::before{animation:none}
  .rv-fig.ph,.rv-slide{transition:none}
  .rv-slide{transform:none}
  .fx-panel:not([hidden]){animation:none}
  .rv-btn{transition:none}
}

/* Hero photo */
.hero-photo{aspect-ratio:4/5;overflow:hidden;border-radius:8px;background:var(--sky)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}

/* ===== Students of every age ===== */
.ages-sec{padding:64px 0 72px}
.ages{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 24px}
.ages li{display:grid;grid-template-rows:176px auto 1fr auto;min-width:0;margin:0}
.age-step{align-self:end;height:calc(68px + var(--i)*36px);display:flex;align-items:flex-end;padding:14px 16px;border-radius:6px 6px 0 0;border-bottom:4px solid var(--pencil);background:var(--sky);color:var(--ink)}
.ages li:nth-child(2) .age-step{background:#A9CBD2}
.ages li:nth-child(3) .age-step{background:#4E8788;color:var(--white)}
.ages li:nth-child(4) .age-step{background:var(--chalk);color:var(--white)}
.age-lvl{font:700 1.2rem/1.15 var(--head);letter-spacing:-.01em}
.ages h3{margin:18px 0 6px;font-size:1.15rem}
.ages p{font-size:.98rem;margin-bottom:12px}
.ages .more{font-size:.95rem;justify-self:start}

/* Bars rise one after another the first time the section scrolls into view */
.ages.js .age-step{clip-path:inset(100% 0 0 0)}
.ages.js.in .age-step{clip-path:inset(0);transition:clip-path .8s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.16s)}

@media (max-width:1000px) and (min-width:821px){
  .ages{grid-template-columns:1fr 1fr;gap:36px 24px}
  .ages li{grid-template-rows:auto auto 1fr auto}
  .age-step{height:64px!important}
}
@media (max-width:820px){
  .hero-photo{order:-1;width:112px;aspect-ratio:1;border-radius:50%}
  .hero .btns .btn{flex:1 1 220px;text-align:center}
  .ages{grid-template-columns:1fr;gap:32px}
  .ages li{grid-template-rows:auto auto auto auto}
  .age-step{height:54px;width:calc(52% + var(--i)*16%);align-items:center;padding:0 16px;border-radius:6px 6px 6px 0;border-bottom-width:4px;margin-bottom:0}
  .ages.js .age-step{clip-path:inset(0 100% 0 0)}
  .ages.js.in .age-step{clip-path:inset(0)}
  .ages h3{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .ages.js .age-step{clip-path:none}
  .ages.js.in .age-step{transition:none}
}