/* Paintings with real-text overlays: Roots, Lighthouse, Schools, the boat. Also: research cards, covers, teachers' stones.
   Positions are fractions of the painting (1376 x 768). Moving things are aria-hidden; text is still. */
.rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,28px);margin-top:30px}
.rcard{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px 24px 26px;box-shadow:0 4px 14px rgba(31,59,58,.05)}
.rcard h3{font-size:21px;margin-bottom:8px}
.rcard p{margin:0;font-size:17px;line-height:1.55;color:var(--ink2)}

.p3-intro{padding-bottom:clamp(24px,4vw,44px)}
.p3{position:relative;background:var(--mist);padding:clamp(36px,6vw,84px) var(--gut)}
.p3-roots{background:var(--sage)}.p3-lh{background:var(--mist)}.p3-sch{background:var(--birch)}
.p3-stage{position:relative;width:100%;max-width:1240px;margin:0 auto;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:#dfe8e8}
.p3-pic{position:relative;width:100%;aspect-ratio:1376/768;overflow:hidden;background:#dfe8e8}
.p3-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p3-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.p3-copy{position:absolute;z-index:6}
.p3-eye{margin:0 0 6px;font:700 clamp(12px,1.05vw,14.5px)/1.3 var(--body);color:var(--fjord)}
.p3-copy h2,.p3-copy h3{font-size:clamp(26px,3vw,40px);line-height:1.1;text-shadow:0 0 18px rgba(248,246,240,.85)}
.p3-line{margin:8px 0 10px;font-size:clamp(15px,1.25vw,18px);line-height:1.45;color:#2f4947;text-shadow:0 0 14px rgba(248,246,240,.9)}
.p3-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 18px;margin:0;font-size:clamp(13px,1.05vw,15px);color:var(--ink2)}
.p3-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--clay2)}
.p3-all{margin:0;padding:0 var(--gut) clamp(40px,6vw,72px);text-align:center;background:var(--birch)}

.p3-roots .p3-copy{left:24%;width:37%;top:4%}
.p3-lh .p3-copy{left:50%;right:3%;top:11%;padding:14px 18px 6px;border-radius:18px;background:rgba(255,253,246,.72)}
.p3-sch .p3-copy{left:22%;right:22%;top:3.5%;text-align:center}
.p3-sch .p3-meta{justify-content:center}
.p3-boat .p3-copy{left:25%;right:25%;top:3.5%;text-align:center}
.p3-boat .p3-copy h2{font-size:clamp(28px,3.4vw,46px)}

/* roots: the five levels, beside each child */
.p3-labs{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.p3-labs li{position:absolute;left:calc(var(--x)*100%);top:calc(var(--y)*100%);transform:translate(-50%,calc(-50% + 8px));padding:.3em .85em;border-radius:999px;background:rgba(255,253,246,.94);box-shadow:0 2px 12px rgba(31,59,58,.16);font:700 clamp(10.5px,1.2vw,16px)/1.2 var(--body);color:var(--pine);white-space:nowrap;opacity:0;transition:opacity .9s ease,transform .9s var(--ease)}
.p3-labs li.on{opacity:1;transform:translate(-50%,-50%)}

/* moving letters, kept steady and readable */
.p3-let{position:absolute;left:0;top:0;font:700 clamp(32px,4.8vw,66px)/1 var(--body);color:#9c6146;text-shadow:0 0 14px rgba(255,230,170,.95),0 0 3px #fffaf0;opacity:0;will-change:transform,opacity;white-space:nowrap}
.p3-glow{position:absolute;left:73%;top:75%;width:30%;aspect-ratio:2;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,232,170,.8),transparent 68%);opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.p3-glow.on{opacity:.9}
.p3-item{position:absolute;left:0;top:0;font:700 clamp(14px,2vw,28px)/1 var(--body);color:#9c6146;text-shadow:0 0 10px rgba(255,226,150,.95),0 0 2px #fffaf0;opacity:0;will-change:transform,opacity;white-space:nowrap}
.p3-win{position:absolute;width:2.2%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,.95),rgba(255,214,130,.35) 50%,transparent 72%);opacity:0;transition:opacity .9s ease}
.p3-win.on{opacity:1}
.p3-bk{position:absolute;width:7%;aspect-ratio:1.6;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,226,150,.85),transparent 70%);opacity:0}

/* the boat: a clipped copy bobs very gently over the still painting */
.p3-bob{-webkit-mask-image:radial-gradient(ellipse 24% 29% at 46.5% 57%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 24% 29% at 46.5% 57%,#000 62%,transparent 100%);animation:bob3 7s ease-in-out infinite alternate;animation-play-state:paused}
.p3-boat.run .p3-bob{animation-play-state:running}
@keyframes bob3{from{transform:translateY(-1.5px)}to{transform:translateY(2.5px)}}
.p3-stack{position:absolute;left:60%;top:61%;width:8%;aspect-ratio:1.5;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,226,150,.85),transparent 70%);opacity:0}
.p3-chip{position:absolute;left:0;top:0;padding:.28em .8em;border-radius:999px;background:rgba(255,253,246,.94);box-shadow:0 2px 12px rgba(255,214,130,.8);font:700 clamp(11px,1.3vw,18px)/1.2 var(--body);color:var(--pine);white-space:nowrap;opacity:0;will-change:transform,opacity}

/* covers open the look-inside viewer */
.shh{font-size:clamp(26px,3vw,36px)}
.cov-btn{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:center}
.cov-btn img{margin-bottom:8px}
.cov-look{display:inline-block;padding:4px 12px;border-radius:999px;border:1px solid #b8bfb3;background:var(--white);font:700 13.5px/1.4 var(--body);color:var(--pine)}
.cov-btn:hover .cov-look{background:var(--pine);color:var(--snow)}

/* teachers: a warm line that lights stone by stone */
.steps.s3::after{content:"";position:absolute;left:12.5%;right:12.5%;top:10px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--clay),var(--butter));transform-origin:0 50%;transform:scaleX(var(--fill,0))}
.steps.s3 li i{background:var(--snow);border-color:#b3c0ac;z-index:1}
.steps.s3 li i::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--butter);border:4px solid var(--clay);opacity:0;transition:opacity .6s ease}
.steps.s3 li i::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(231,196,120,.8),transparent 70%);opacity:0;transition:opacity .8s ease}
.steps.s3 li span{display:block;opacity:.45;transition:opacity .6s ease}
.steps.s3 li.on i::before,.steps.s3 li.on i::after{opacity:1}
.steps.s3 li.on span{opacity:1}
.steps.s3 li:last-child i{background:var(--snow);border-color:#b3c0ac}

/* tablet and phone: the copy sits above the painting */
@media (max-width:860px){
  .rcards{grid-template-columns:minmax(0,1fr)}
  .p3-stage{display:flex;flex-direction:column}
  .p3-copy,.p3-roots .p3-copy,.p3-lh .p3-copy,.p3-sch .p3-copy,.p3-boat .p3-copy{position:static;order:1;width:auto;padding:30px var(--gut) 18px;background:none;border-radius:0;text-align:left}
  .p3-copy h2,.p3-copy h3,.p3-line{text-shadow:none}
  .p3-pic{order:2}
  .p3-sch .p3-meta{justify-content:flex-start}
  .p3-boat .p3-copy{text-align:left}
}

/* calm: finished stills */
html.calm .p3-labs li{opacity:1!important;transform:translate(-50%,-50%)!important;transition:none}
html.calm .p3-bob{animation:none}
html.calm .p3-win{opacity:1!important;transition:none}
html.calm .p3-glow{opacity:.9;transition:none}
html.calm .steps.s3 li i::before,html.calm .steps.s3 li i::after,html.calm .steps.s3 li span{opacity:1!important;transition:none}
html.calm .steps.s3::after{transform:scaleX(1)!important}
html.calm .p3-bob{display:none}
@media (prefers-reduced-motion:reduce){.p3-labs li{opacity:1;transform:translate(-50%,-50%)}.p3-bob{display:none}.p3-win{opacity:1}.steps.s3 li i::before,.steps.s3 li i::after,.steps.s3 li span{opacity:1}.steps.s3::after{transform:scaleX(1)}}

/* the tree painting joins the family: one rounded card */
.tree{padding:clamp(36px,6vw,84px) var(--gut)}
.tree-frame{position:relative;max-width:1240px;margin:0 auto;border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.tree-frame .tree-copy{right:clamp(16px,3.4vw,60px)}
.p3-boat{background:var(--mist)}

/* roots: birds with letters, a frog; schools: fireflies */
.p3-bird{position:absolute;left:0;top:0;width:clamp(34px,4.4vw,62px);will-change:transform,opacity;opacity:0}
.p3-bird svg{display:block;width:100%;height:auto;overflow:visible}
.p3-bird .wing{transform-box:fill-box;transform-origin:50% 100%;animation:flap 0.9s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.35)}}
.p3-bird .carry{position:absolute;left:50%;top:78%;transform:translateX(-50%)}
.p3-tile{display:inline-block;padding:.08em .38em .14em;border-radius:8px;background:#fffdf6;color:var(--pine);box-shadow:0 2px 8px rgba(31,59,58,.22);font:700 clamp(18px,2.4vw,32px)/1.1 var(--body);white-space:nowrap}
.p3-ground{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.p3-frog{position:absolute;left:0;top:0;width:clamp(26px,3.4vw,48px);opacity:0;will-change:transform,opacity}
.p3-frog svg{display:block;width:100%;height:auto}
.p3-fly{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle,#fffbe6 0 22%,rgba(255,216,120,.95) 40%,rgba(255,214,130,0) 72%);will-change:transform,opacity;opacity:.85}
.p3-item::before{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;margin:2px 0 0 -6px;border-radius:50%;background:radial-gradient(circle,#fffbe6 0 22%,rgba(255,216,120,.95) 42%,rgba(255,214,130,0) 72%)}

@media (max-width:860px){
  .p3{padding:8px var(--gut) clamp(32px,6vw,56px)}
  .p3-stage{border-radius:0;box-shadow:none;overflow:visible;background:none}
  .p3-pic{border-radius:22px;box-shadow:var(--shadow)}
  .p3-copy,.p3-roots .p3-copy,.p3-lh .p3-copy,.p3-sch .p3-copy,.p3-boat .p3-copy{padding:26px 2px 16px}
  .tree{padding:8px var(--gut) clamp(32px,6vw,56px)}
  .tree-frame{border-radius:0;box-shadow:none;overflow:visible;display:flex;flex-direction:column}
  .tree-frame .tree-copy{position:static;order:1;width:auto;padding:26px 2px 16px}
  .tree-frame .tree-stage{order:2;border-radius:22px;box-shadow:var(--shadow)}
}
html.calm .p3-bird .wing{animation:none}
.p3-item.rest::before{display:none}
.p3-item{padding:.1em .42em .16em;border-radius:8px;background:rgba(255,253,246,.92);box-shadow:0 2px 8px rgba(31,59,58,.2);text-shadow:none;color:var(--pine)}
.p3-item::before{top:calc(100% + 1px)}