/* Homepage framework: editorial cards with one-time illustrative motion. */
.framework-compact .framework-grid { gap:24px; }
.framework-compact .framework-card { border-radius:20px; border-color:#dfd0bc; box-shadow:0 12px 30px #392a1910; background:#fffdf8; transition:transform .3s ease,box-shadow .3s ease; }
.framework-compact .framework-image { height:206px; background:radial-gradient(ellipse at 65% 70%,#fffaf1 0%,#f1e6d6 65%,#eadbc6 100%); border-bottom:1px solid #dfd0bc; }
.framework-stage { position:absolute; top:19px; left:22px; right:22px; display:flex; align-items:center; gap:12px; color:var(--orange-dark); font-family:var(--serif); font-size:23px; line-height:1; }
.framework-stage>span { font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.framework-image svg { position:absolute; width:100%; height:168px; bottom:0; left:0; overflow:visible; }
.framework-image svg path { stroke-linecap:round; stroke-linejoin:round; }
.framework-image svg circle { filter:drop-shadow(0 5px 5px #382c1920); }
.framework-compact .framework-body { padding:26px 24px 30px; }
.framework-body h4 { font-size:21px; line-height:1.18; }
.framework-compact .framework-card:nth-child(2) { --reveal-delay:.15s; }
.framework-compact .framework-card:nth-child(3) { --reveal-delay:.3s; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .framework-compact .framework-card:hover { transform:translateY(-5px); box-shadow:0 18px 38px #392a191c; }
}
@media (prefers-reduced-motion:no-preference) {
  .framework-card.is-revealed { animation:framework-arrive .7s backwards; animation-delay:var(--reveal-delay,0s); }
  .is-revealed .framework-art-fit svg path { animation:framework-draw 1.4s both; animation-delay:var(--reveal-delay,0s); }
  .is-revealed .framework-art-independent svg g { transform-box:fill-box; transform-origin:center bottom; animation:framework-rise 1.3s both; animation-delay:var(--reveal-delay,0s); }
  .is-revealed .framework-art-free svg circle { animation:framework-sun 1.6s both; animation-delay:var(--reveal-delay,0s); }
}
@keyframes framework-arrive { from { opacity:.4; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes framework-draw { from { stroke-dasharray:1; stroke-dashoffset:1; } to { stroke-dasharray:1; stroke-dashoffset:0; } }
@keyframes framework-rise { from { opacity:.3; transform:scaleY(.15); } to { opacity:1; transform:scaleY(1); } }
@keyframes framework-sun { from { opacity:0; transform:translateY(45px); } to { opacity:1; transform:translateY(0); } }
.youtube-view-count { position:absolute; left:0; right:0; bottom:0; padding:34px 24px 20px; color:#fff; background:linear-gradient(transparent,#000c); font-size:16px; line-height:1.3; font-weight:700; }
.youtube-view-count>span { font-size:12px; }
@media (max-width:760px) {
  .framework-compact .framework-card { display:block; }
  .framework-compact .framework-image { height:190px; min-height:0; }
  .framework-compact .framework-body { padding:24px; }
  .framework-compact .framework-body p { font-size:14px; }
  .framework-image svg { height:154px; }
  .youtube-view-count { font-size:14px; padding:28px 16px 14px; }
}