.post-card{transition:transform .38s cubic-bezier(.2,.7,.25,1),box-shadow .38s ease,border-color .38s ease}
.post-cover img{transition:transform .65s cubic-bezier(.2,.65,.3,1)}
.topic-tile{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.topic-doodle{transform-origin:25% 60%;transition:transform .4s ease}
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::after{content:'';position:absolute;inset:-40% -20%;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#fffdf530 50%,transparent 65%);transform:translateX(-120%);transition:transform .65s ease}
.cta svg,.read-link svg,.text-link svg{transition:transform .25s ease}
.nav a::before{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:4px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:focus-visible::before{transform:scaleX(1)}
.reading-progress{position:fixed;top:0;left:0;z-index:90;width:100%;height:4px;pointer-events:none;transform:scaleX(var(--reading-progress,0));transform-origin:left;background:linear-gradient(90deg,#ed714f,#f4c65b,#9cbda3);box-shadow:0 1px 5px #29483e12}
.hero-art{isolation:isolate}
.learning-illustration{display:block;width:100%;height:auto;overflow:visible}
.learning-illustration :is(.illustration-pencil,.illustration-rainbow,.illustration-leaves,.illustration-note,.illustration-sun,.illustration-page-left,.illustration-page-right){transform-box:fill-box;animation-play-state:paused;transform-origin:center}
body.motion-enabled .illustration-pencil{animation:pencil-write 3.6s ease-in-out infinite paused;transform-origin:50% 85%}
body.motion-enabled .illustration-rainbow{animation:rainbow-grow 5s ease-in-out infinite paused;transform-origin:50% 100%}
body.motion-enabled .illustration-leaves{animation:leaves-sway 3.8s ease-in-out infinite paused;transform-origin:50% 100%}
body.motion-enabled .illustration-page-left{animation:page-left 4.6s ease-in-out infinite paused;transform-origin:100% 75%}
body.motion-enabled .illustration-page-right{animation:page-right 4.6s ease-in-out -.8s infinite paused;transform-origin:0% 75%}
body.motion-enabled .illustration-note{animation:note-sway 5s ease-in-out infinite paused}
body.motion-enabled .illustration-sun{animation:note-sway 6s ease-in-out infinite paused}
body.motion-enabled .hero-art.is-in-view:not(.is-paused) .learning-illustration g,body.motion-enabled .about-art.scene-active .learning-illustration g{animation-play-state:running}
html.effects-paused .learning-illustration g{animation-play-state:paused!important}
@keyframes pencil-write{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(-7px,-11px) rotate(5deg)}}
@keyframes rainbow-grow{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-5px) scaleY(1.055)}}
@keyframes leaves-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}
@keyframes page-left{0%,100%{transform:rotate(0) scaleX(1)}50%{transform:rotate(2.5deg) scaleX(.97) translateY(-3px)}}
@keyframes page-right{0%,100%{transform:rotate(0) scaleX(1)}50%{transform:rotate(-3deg) scaleX(.965) translateY(-4px)}}
@keyframes note-sway{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@media(max-width:700px){.hero-art .learning-illustration,.about-art .learning-illustration{max-height:none;width:100%;height:auto}body.motion-enabled .learning-illustration g{animation-duration:5.8s}}
@media print{.learning-illustration g{animation:none!important;transform:none!important}}
.animated-heading{display:grid;grid-template-columns:minmax(0,1fr) 240px;align-items:center;gap:28px;margin-bottom:26px}
.animated-heading-copy{min-width:0}
.animated-heading-copy .lead{margin-bottom:0}
.heading-objects{height:190px;position:relative;pointer-events:none}
.heading-objects .floating-pencil{left:5%;top:30%;width:60px;height:100px}
.heading-objects .floating-plane{right:2%;top:8%;width:100px;height:77px}
.heading-objects .floating-star{left:28%;top:1%;width:48px;height:48px}
.heading-objects .floating-ring{left:47%;bottom:0}
.heading-objects .floating-spark{right:0;top:66%}
.about-art{position:relative;isolation:isolate;min-width:0}
.about-art>img{display:block;width:100%;height:auto}
body.motion-enabled .scene-active .floating-object{animation-play-state:running}
body.motion-enabled .about-art>img{animation:medidas-float 6.4s ease-in-out infinite;animation-play-state:paused}
body.motion-enabled .about-art.scene-active>img{animation-play-state:running}
html.effects-paused .about-art>img{animation-play-state:paused!important}
@media(max-width:700px){
    .animated-heading{grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:22px}
    .heading-objects{height:95px;width:210px;justify-self:end;margin-top:4px}
    .heading-objects .floating-pencil{width:40px;height:68px;left:2%;top:16%}
    .heading-objects .floating-plane{width:73px;height:56px;right:2%;top:13%}
    .heading-objects .floating-star{width:34px;height:34px;left:39%;top:5%}
    .about-art{--float-distance:-7px;--float-rotation:-.5deg;--float-scale:1.005}
    body.motion-enabled .about-art>img{animation-duration:8s}
}
@media print{.heading-objects,.about-art .floating-objects{display:none!important}.animated-heading{display:block}.about-art>img{animation:none!important;transform:none!important}}
.floating-objects{position:absolute;inset:0;pointer-events:none;z-index:2}
.floating-object{position:absolute;display:block;filter:drop-shadow(0 4px 5px #29483e09)}
.floating-pencil{width:66px;height:110px;left:1%;top:42%}
.floating-plane{width:105px;height:80px;right:2%;top:2%}
.floating-star{width:53px;height:53px;left:12%;top:4%}
.floating-ring{width:38px;height:38px;left:24%;bottom:1%}
.floating-spark{width:33px;height:33px;right:0;top:48%}
body.motion-enabled .floating-object{animation:object-drift 4.8s ease-in-out infinite;animation-play-state:paused}
body.motion-enabled .floating-plane{animation-name:paper-flight;animation-duration:6.5s;animation-delay:-2s}
body.motion-enabled .floating-star{animation-name:star-sway;animation-duration:5.4s;animation-delay:-1s}
body.motion-enabled .floating-ring{animation-duration:5.8s;animation-delay:-3s}
body.motion-enabled .floating-spark{animation-name:star-sway;animation-duration:4s;animation-delay:-2s}
body.motion-enabled .hero-art.is-in-view:not(.is-paused) .floating-object{animation-play-state:running}
.post-cover .cover-spark{position:absolute;right:16px;bottom:14px;width:34px;height:34px;pointer-events:none;opacity:.9}
body.motion-enabled .cover-spark{animation:star-sway 4.6s ease-in-out infinite;animation-play-state:paused}
body.motion-enabled .topic-tile .topic-doodle,body.motion-enabled .manifesto .big-heart{animation:doodle-sway 5.5s ease-in-out infinite;animation-play-state:paused}
body.motion-enabled .scene-active :is(.cover-spark,.topic-doodle,.big-heart){animation-play-state:running}
html.effects-paused :is(.floating-object,.cover-spark,.topic-doodle,.big-heart){animation-play-state:paused!important}
@keyframes object-drift{0%,100%{transform:translate(0,0) rotate(-5deg)}50%{transform:translate(7px,-17px) rotate(7deg)}}
@keyframes paper-flight{0%,100%{transform:translate(-5px,5px) rotate(-7deg)}50%{transform:translate(10px,-13px) rotate(8deg)}}
@keyframes star-sway{0%,100%{transform:translateY(0) rotate(-12deg) scale(.92)}50%{transform:translateY(-10px) rotate(18deg) scale(1.08)}}
@keyframes doodle-sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@media(max-width:700px){
    .floating-pencil{width:46px;height:78px;left:0;top:40%}
    .floating-plane{width:78px;height:60px;right:1%;top:1%}
    .floating-star{width:38px;height:38px;left:8%;top:3%}
    .floating-ring,.floating-spark{display:none}
    .post-cover .cover-spark{width:27px;height:27px;right:12px;bottom:12px}
    body.motion-enabled .floating-object{animation-duration:7s}
}
body.high-contrast .floating-objects{display:none}
@media print{.floating-objects,.cover-spark{display:none!important}}
.hero-art::before{content:'';position:absolute;inset:7% 5%;border-radius:50%;background:radial-gradient(ellipse,#f4c65b18,transparent 68%);z-index:-1;pointer-events:none}
body.motion-enabled .hero-art>img{transform-origin:50% 65%;animation:medidas-float var(--float-duration,5.8s) ease-in-out infinite;animation-play-state:paused}
body.motion-enabled .hero-art .sticker{animation:medidas-sticker var(--sticker-duration,6.8s) ease-in-out infinite;animation-play-state:paused}
body.motion-enabled .hero-art.is-in-view:not(.is-paused)>img,body.motion-enabled .hero-art.is-in-view:not(.is-paused) .sticker{animation-play-state:running}
@keyframes medidas-float{0%,100%{transform:translateY(0) rotate(.3deg) scale(1)}50%{transform:translateY(var(--float-distance,-18px)) rotate(var(--float-rotation,-1.3deg)) scale(var(--float-scale,1.018))}}
@keyframes medidas-sticker{0%,100%{transform:rotate(9deg) translateY(0)}50%{transform:rotate(var(--sticker-rotation,2deg)) translateY(var(--sticker-distance,-5px))}}
@media(hover:hover) and (pointer:fine){
    .post-card:hover{transform:translateY(-10px) scale(1.012);border-color:#96af8c;box-shadow:0 19px 36px #29483e1c}
    .post-card:hover .post-cover img{transform:scale(1.065)}
    .topic-tile:is(a):hover{transform:translateY(-6px);box-shadow:0 12px 24px #29483e0b}
    .topic-tile:is(a):hover .topic-doodle{transform:rotate(-12deg) scale(1.08)}
    .cta:hover::after{transform:translateX(120%)}
    .cta:hover svg,.read-link:hover svg,.text-link:hover svg{transform:translateX(4px)}
    .nav a:hover::before{transform:scaleX(1)}
}
.post-card:focus-within{border-color:#a9bda0;box-shadow:0 8px 22px #29483e0e}
@media(max-width:700px){
    .hero-art{--float-duration:7.6s;--float-distance:-7px;--float-rotation:-.5deg;--float-scale:1.005;--sticker-duration:8.4s;--sticker-rotation:6deg;--sticker-distance:-2px}
    .post-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px #29483e0e}
    .post-card:hover .post-cover img{transform:scale(1.02)}
}
@media(hover:none),(pointer:coarse){
    .post-card:hover,.topic-tile:is(a):hover,.cta:hover{transform:none;box-shadow:none}
    .post-card:hover .post-cover img,.topic-tile:is(a):hover .topic-doodle{transform:none}
    .cta::after{display:none}
}
body.high-contrast .reading-progress{background:var(--ink)}
body.motion-reduced :is(.post-cover img,.topic-doodle,.cta svg,.read-link svg,.text-link svg){transform:none!important}
body.motion-reduced .cta::after{display:none}
@media(prefers-reduced-motion:reduce){
    body:not(.motion-enabled) :is(.post-cover img,.topic-doodle,.cta svg,.read-link svg,.text-link svg){transform:none!important;transition:none!important}
    body:not(.motion-enabled) .cta::after{display:none}
}
@media print{.reading-progress,.hero-art::before,.cta::after{display:none!important}.hero-art>img,.hero-art .sticker{animation:none!important;transform:none!important}}