.school-sky{height:265px;position:relative;display:flex;justify-content:center;align-items:center;background:url('/online-school-sky.png') center/cover;border-radius:24px 24px 8px 8px;isolation:isolate}
.title-paper{text-align:center;position:relative;padding:14px 42px 20px;background:#fff9ee;border:2px dashed #df9dac;border-radius:48% 44% 35% 38% / 30% 32% 28% 30%;box-shadow:0 0 0 7px #fff9ee,0 10px 0 7px #508a9d24;transform:rotate(-1deg)}
.online-ribbon{display:block;color:#e5475b;font-size:24px;font-weight:950;line-height:1.1;text-shadow:1px 2px 0 #fab9b1;letter-spacing:4px}
.title-paper h1{font-size:clamp(38px,5vw,58px);line-height:1.15;letter-spacing:-3px;font-weight:950;color:#482074;background:#ffe16a;border-radius:40% 35% 24% 28%;padding:3px 16px 8px;margin:8px 0;text-shadow:1px 3px 0 #c7a354;box-shadow:0 4px 0 #e7bd4f}
.title-paper p{margin:10px -15px -8px;padding:5px 20px;background:#ffb3cf;color:#293153;font-size:16px;font-weight:900;clip-path:polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%)}
.sky-caption{position:absolute;right:22px;top:14px;background:#fff9ed;padding:8px 14px;border-radius:30px;transform:rotate(5deg);font-size:12px;font-weight:800;box-shadow:0 3px 0 #6486a52b}
@media(max-width:950px){.sky-caption{display:none}}
@media(max-width:700px){.school-sky{height:196px;background-size:auto 196px;border-radius:18px 18px 6px 6px}
.title-paper{padding:10px 17px 16px}
.online-ribbon{font-size:19px}
.title-paper h1{font-size:37px;letter-spacing:-2px;padding:3px 9px 6px}
.title-paper p{font-size:11px;margin:9px -8px -6px;padding:5px 12px}}
@font-face{font-family:SchoolPaper;src:url('/online-jua.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.title-paper{padding:12px 40px 21px;background-image:radial-gradient(#d3b99422 .6px,transparent .8px);background-size:4px 4px}
.online-ribbon,.title-paper h1,.title-paper p,.sky-caption{font-family:SchoolPaper,"Malgun Gothic",sans-serif;font-weight:400}
.online-ribbon{font-size:32px;letter-spacing:3px;color:#f35368;-webkit-text-stroke:1px #dc3650;paint-order:stroke fill;text-shadow:0 1px #ff92a2,0 2px #cf3448,0 3px #bd2c42,1px 5px 2px #792a3b33;transform:rotate(-3deg)}
.title-paper h1{font-size:72px;letter-spacing:-2px;line-height:1.05;padding:8px 14px 10px;margin:6px 0;background:radial-gradient(ellipse at 40% 20%,#fff08a,#ffd653);border-radius:40% 35% 24% 28%;box-shadow:0 2px #f5c445,0 5px #dbad36,0 8px 4px #84622b25;text-shadow:none}
.title-paper h1 span{display:inline-block;color:#572181;-webkit-text-stroke:1px #491568;paint-order:stroke fill;text-shadow:0 -1px #a868bb,0 1px #743994,0 2px #44115f,0 3px #44115f,1px 5px 2px #52236138;transform:rotate(-5deg)}
.title-paper h1 span:nth-child(2){transform:rotate(4deg) translateY(-2px)}
.title-paper h1 span:nth-child(3){transform:rotate(-3deg) translateY(2px)}
.title-paper h1 span:nth-child(4){transform:rotate(5deg) translateY(-3px)}
.title-paper h1 span:nth-child(5){transform:rotate(-4deg)}
.title-paper p{font-size:20px;letter-spacing:.1px;color:#29385c;text-shadow:0 1px #ffdeec;background:linear-gradient(#ffc5df,#f6a4c5);padding:6px 20px;margin-top:13px;filter:drop-shadow(0 3px 0 #a6567822)}
.sky-caption{font-size:15px}
@media(max-width:700px){.title-paper{padding:8px 17px 15px}
.online-ribbon{font-size:24px;letter-spacing:2px}
.title-paper h1{font-size:46px;letter-spacing:-1px;padding:6px 10px 8px;margin:5px 0}
.title-paper p{font-size:13px;padding:5px 12px;margin-top:10px}}
@media(max-width:700px){.school-sky{height:98px;background-size:cover;border-radius:16px 16px 6px 6px}
.title-paper{padding:4px 18px 9px;box-shadow:0 0 0 3px #fff9ee,0 4px 0 3px #508a9d24}
.online-ribbon{font-size:13px;letter-spacing:2px;text-shadow:0 1px #cf3448;-webkit-text-stroke:0}
.title-paper h1{font-size:30px;line-height:1;padding:2px 9px 4px;margin:3px 0;box-shadow:0 2px #dbad36}
.title-paper h1 span{text-shadow:0 1px #743994,0 2px #44115f;-webkit-text-stroke:.5px #491568}
.title-paper p{font-size:10px;padding:2px 9px;margin:5px -9px -5px}}

/* One-line heading with separate school identity and invitation. */
.school-sky .title-paper{display:flex;align-items:center;gap:14px;padding:18px 26px;white-space:nowrap}
.school-sky .online-ribbon{display:inline-block;letter-spacing:1px}
.school-sky .title-paper h1{margin:0}
.sky-emblem{position:absolute;left:30px;top:24px;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 3px 3px #254b5733)}
.sky-invitation{position:absolute;left:24px;bottom:32px;margin:0;padding:10px 16px;background:#fff9ee;border-radius:24px 18px 25px 16px;color:#29385c;font:20px/1.35 SchoolPaper,"Malgun Gothic",sans-serif;transform:rotate(-4deg);box-shadow:0 3px 0 #6486a52b}
@media(min-width:701px) and (max-width:950px){.school-sky .title-paper{gap:8px;padding:16px}.school-sky .title-paper h1{font-size:52px}.school-sky .online-ribbon{font-size:24px}.sky-invitation{font-size:14px;left:12px;bottom:20px}.sky-emblem{width:52px;height:52px;left:20px;top:18px}}
@media(max-width:700px){.school-sky .title-paper{gap:7px;padding:7px 12px;margin-top:-15px;margin-left:32px}.school-sky .online-ribbon{font-size:16px;letter-spacing:0}.school-sky .title-paper h1{font-size:30px}.sky-emblem{left:12px;top:12px;width:34px;height:34px}.sky-invitation{left:12px;bottom:7px;padding:3px 9px;font-size:11px;transform:rotate(-2deg)}.sky-invitation br{display:none}}
.online-admin .sky-emblem{width:44px;height:44px;left:20px;top:12px}
.online-admin .sky-invitation{font-size:12px;left:16px;bottom:12px;padding:6px 10px}
@media(max-width:700px){.online-admin .school-sky .title-paper{margin:0 0 0 20px}.online-admin .sky-emblem{width:26px;height:26px;left:8px;top:5px}.online-admin .sky-invitation{font-size:8px;left:5px;bottom:1px;padding:1px 4px}}
.sky-emblem{left:130px}
@media(min-width:701px) and (max-width:950px){.sky-emblem{left:100px}}
@media(max-width:700px){.sky-emblem{left:64px}}
.online-admin .sky-emblem{left:90px}
@media(max-width:700px){.online-admin .sky-emblem{left:50px}}