/* Crayon Box: the child-friendly look of the public pages.
   Fine crayon lines, warm paper, handwritten headings (Kalam) and small doodles, in the school's indigo and lime.
   Everything is scoped to body.crayon, which build.py puts on every public page; the staff pages stay plain.
   The crayon texture comes from the #crayon SVG filter in layout.html and the drawings in /assets/img/crayon/. */
.crayon {
  --hand: "Kalam", "Hind Guntur", cursive;
  --paper: #FAF7EE;
  --c-indigo: #2E3092; --c-coral: #E0605A; --c-leaf: #3E9E6E; --c-gold: #EFA938; --c-sky: #4A9FD8; --c-rose: #D9679B;
  --wobble: 30px 24px 32px 22px / 24px 32px 22px 30px;
  --wobble-soft: 18px 12px 20px 14px / 14px 20px 12px 18px;
  --lift: 0 1px 2px rgba(31,32,112,.06), 0 14px 32px -18px rgba(31,32,112,.35);
  --lift-up: 0 2px 4px rgba(31,32,112,.08), 0 26px 44px -20px rgba(31,32,112,.45);
  --stroke: url("/assets/img/crayon/stroke.svg");
}

/* ---------- Bands: more air, warm paper, doodles in the corners ---------- */
.crayon .band { position: relative; padding-block: 88px; --band-bg: #fff; background-repeat: no-repeat; }
.crayon .band.tint { --band-bg: var(--paper); background-color: var(--paper); }
.crayon .band.deep { --band-bg: var(--indigo-deep); }
.crayon .band > .wrap { position: relative; z-index: 1; }
@media (min-width: 1100px) {
  .crayon .band:not(.deep) { background-size: 46px, 42px; background-position: left 14px top 20px, right 14px bottom 20px; }
  .crayon .band.tint { background-size: 46px, 42px, 220px; background-repeat: no-repeat, no-repeat, repeat; background-position: left 14px top 20px, right 14px bottom 20px, 0 0; }
  .crayon main > .band:nth-of-type(4n+1):not(.deep) { background-image: url("/assets/img/crayon/sun.svg"), url("/assets/img/crayon/pencil.svg"); }
  .crayon main > .band:nth-of-type(4n+2):not(.deep) { background-image: url("/assets/img/crayon/star.svg"), url("/assets/img/crayon/plane.svg"); }
  .crayon main > .band:nth-of-type(4n+3):not(.deep) { background-image: url("/assets/img/crayon/kite.svg"), url("/assets/img/crayon/heart.svg"); }
  .crayon main > .band:nth-of-type(4n+4):not(.deep) { background-image: url("/assets/img/crayon/book.svg"), url("/assets/img/crayon/cloud.svg"); }
  .crayon main > .band.tint:nth-of-type(4n+1) { background-image: url("/assets/img/crayon/sun.svg"), url("/assets/img/crayon/pencil.svg"), url("/assets/img/crayon/grain.svg"); }
  .crayon main > .band.tint:nth-of-type(4n+2) { background-image: url("/assets/img/crayon/star.svg"), url("/assets/img/crayon/plane.svg"), url("/assets/img/crayon/grain.svg"); }
  .crayon main > .band.tint:nth-of-type(4n+3) { background-image: url("/assets/img/crayon/kite.svg"), url("/assets/img/crayon/heart.svg"), url("/assets/img/crayon/grain.svg"); }
  .crayon main > .band.tint:nth-of-type(4n+4) { background-image: url("/assets/img/crayon/book.svg"), url("/assets/img/crayon/cloud.svg"), url("/assets/img/crayon/grain.svg"); }
}
@media (min-width: 1560px) {
  .crayon .band:not(.deep) { background-size: 84px, 72px; background-position: left calc(50% - 730px) top 44px, right calc(50% - 724px) bottom 48px; }
  .crayon .band.tint { background-size: 84px, 72px, 220px; background-position: left calc(50% - 730px) top 44px, right calc(50% - 724px) bottom 48px, 0 0; }
}
@media (max-width: 1099px) {
  .crayon .band.tint { background-image: url("/assets/img/crayon/grain.svg"); background-repeat: repeat; background-size: 220px; }
}
@media (max-width: 560px) { .crayon .band { padding-block: 56px; } }

/* A wavy crayon edge where the banner meets the page, and where the page meets the footer. */
.crayon .hero + .band::before, .crayon .pagehead + .band::before, .crayon .pagehead + [hidden] + .band::before, .crayon .footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 28px; z-index: 6; pointer-events: none;
  background: var(--band-bg, #fff); -webkit-mask: url("/assets/img/crayon/wave.svg") center / 100% 100% no-repeat; mask: url("/assets/img/crayon/wave.svg") center / 100% 100% no-repeat;
}
.crayon .hero + .band::after, .crayon .pagehead + .band::after, .crayon .pagehead + [hidden] + .band::after, .crayon .footer::after {
  content: ""; position: absolute; left: 0; right: 0; top: -29px; height: 28px; z-index: 7; pointer-events: none;
  background: var(--lime); -webkit-mask: url("/assets/img/crayon/wave-line.svg") center / 100% 100% no-repeat; mask: url("/assets/img/crayon/wave-line.svg") center / 100% 100% no-repeat;
}
.crayon .footer { position: relative; margin-top: 27px; --band-bg: var(--indigo-deep); }
.crayon .footer::before { background: var(--indigo-deep); }

/* ---------- Headings ---------- */
.crayon .title { margin-bottom: 44px; }
.crayon .title h2 { position: relative; display: inline-block; font-family: var(--hand); font-weight: 700; font-size: clamp(31px, 4.4vw, 46px); line-height: 1.15; letter-spacing: .005em; padding-bottom: 18px; margin-bottom: 14px; }
.crayon .title h2::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 14px; background: var(--lime); -webkit-mask: var(--stroke) center / 100% 100% no-repeat; mask: var(--stroke) center / 100% 100% no-repeat; }
.crayon .title:not(.center) h2::after { left: -2px; right: 12%; }
.crayon .title p { font-size: 18px; }
.crayon .prose h2, .crayon .stage h2, .crayon .person h2, .crayon .gallery-event h2, .crayon .disclosure h2, .crayon .fees__part h2, .crayon .admissions__sub, .crayon .toppers__title, .crayon .motto .sa { font-family: var(--hand); font-weight: 700; }
.crayon .prose h2 { font-size: clamp(27px, 3.2vw, 34px); }
.crayon .prose h3 { font-family: var(--hand); font-weight: 700; font-size: 23px; }
.crayon .toppers__title { font-size: 26px; }
.crayon .shadow-title { font-family: var(--hand); color: rgba(46,48,146,.32); transform: rotate(-3deg); }
.crayon .lead { font-size: 20px; }

/* ---------- Buttons: hand-cut pills with a lime crayon shadow ---------- */
.crayon .btn { font-family: var(--hand); font-weight: 700; font-size: 18px; padding: 13px 32px 10px; border-width: 2px; border-radius: var(--wobble); box-shadow: 3px 4px 0 var(--lime), 0 14px 22px -14px rgba(31,32,112,.6); transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.crayon .btn:hover { transform: translate(-1px, -2px); background: var(--lime); border-color: var(--lime); color: var(--indigo-deep); box-shadow: 4px 6px 0 var(--indigo), 0 18px 26px -14px rgba(31,32,112,.6); }
.crayon .btn:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--lime); }
.crayon .btn.outline { background: #fff; color: var(--indigo); box-shadow: 3px 4px 0 rgba(46,48,146,.16); }
.crayon .btn.outline:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; box-shadow: 4px 6px 0 var(--lime); }
.crayon .btn.ghost { background: rgba(255,255,255,.08); backdrop-filter: blur(3px); box-shadow: none; }
.crayon .btn.ghost:hover { background: var(--lime); box-shadow: 4px 6px 0 rgba(255,255,255,.35); }
.crayon .nav .apply { border-width: 2px; border-radius: var(--wobble); font-family: var(--hand); font-weight: 700; padding: 7px 20px 4px; }
.crayon .gallery-filter button, .crayon .jump a { border-width: 2px; border-radius: var(--wobble); font-family: var(--hand); font-weight: 700; font-size: 16px; }

/* ---------- Home banner and inner page banner ---------- */
.crayon .hero__slogan { font-family: var(--hand); text-transform: none; line-height: 1; letter-spacing: -.005em; }
.crayon .hero__slogan span + span { position: relative; display: inline-block; padding-bottom: .16em; }
.crayon .hero__slogan span + span::after { content: ""; position: absolute; left: -1%; right: -3%; bottom: -.06em; height: .2em; background: var(--lime); -webkit-mask: var(--stroke) center / 100% 100% no-repeat; mask: var(--stroke) center / 100% 100% no-repeat; }
.crayon .hero h1 { letter-spacing: .08em; }
.crayon .pagehead h1 { font-family: var(--hand); font-weight: 700; font-size: clamp(36px, 5.4vw, 58px); }
.crayon .pagehead h1::after { content: ""; display: block; width: min(220px, 60%); height: 14px; margin-top: 2px; background: var(--lime); -webkit-mask: var(--stroke) center / 100% 100% no-repeat; mask: var(--stroke) center / 100% 100% no-repeat; }
.crayon .pagehead { padding-bottom: 72px; }

/* ---------- Cards: white paper, a soft shadow and a fine crayon frame ---------- */
.crayon .why__item, .crayon .achievement, .crayon .card, .crayon .review, .crayon .contact-cards > div, .crayon .contact-strip > div, .crayon .staff-grid > div, .crayon .cutting, .crayon .facility, .crayon .tc-result {
  position: relative; overflow: visible; border: 0; border-radius: var(--wobble-soft); background: #fff; box-shadow: var(--lift); transition: transform .25s, box-shadow .25s;
}
.crayon .why__item::after, .crayon .achievement::after, .crayon .card::after, .crayon .review::after, .crayon .contact-cards > div::after, .crayon .contact-strip > div::after, .crayon .staff-grid > div::after, .crayon .cutting::after, .crayon .facility::after {
  content: ""; position: absolute; inset: -3px; border: 3px solid var(--c, var(--c-indigo)); border-radius: var(--wobble-soft); filter: url(#crayon); pointer-events: none;
}
.crayon .why__item:hover, .crayon .card:hover, .crayon .achievement:hover, .crayon .cutting:hover, .crayon .facility:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--lift-up); }
.crayon :is(.why__item, .card, .achievement, .review, .contact-cards > div, .contact-strip > div, .staff-grid > div, .cutting, .facility):nth-child(6n+1) { --c: var(--c-indigo); }
.crayon :is(.why__item, .card, .achievement, .review, .contact-cards > div, .contact-strip > div, .staff-grid > div, .cutting, .facility):nth-child(6n+2) { --c: var(--c-coral); }
.crayon :is(.why__item, .card, .achievement, .review, .contact-cards > div, .contact-strip > div, .staff-grid > div, .cutting, .facility):nth-child(6n+3) { --c: var(--c-leaf); }
.crayon :is(.why__item, .card, .achievement, .review, .contact-cards > div, .contact-strip > div, .staff-grid > div, .cutting, .facility):nth-child(6n+4) { --c: var(--c-gold); }
.crayon :is(.why__item, .card, .achievement, .review, .contact-cards > div, .contact-strip > div, .staff-grid > div, .cutting, .facility):nth-child(6n+5) { --c: var(--c-sky); }
.crayon :is(.why__item, .card, .achievement, .review, .contact-cards > div, .contact-strip > div, .staff-grid > div, .cutting, .facility):nth-child(6n+6) { --c: var(--c-rose); }
.crayon .why { gap: 34px 30px; }
.crayon .why__item .ph { border-radius: 16px 10px 0 0 / 12px 18px 0 0; }
.crayon .why__item div { padding: 22px 26px 28px; }
.crayon .why__item h3, .crayon .card h3, .crayon .achievement h3, .crayon .safety__item h3, .crayon .contact-cards h3, .crayon .cutting h2, .crayon .notice h3, .crayon .facility h3 { font-family: var(--hand); font-weight: 700; }
.crayon .why__item h3 { font-size: 24px; }
.crayon .why__item:hover h3 { text-decoration: none; color: var(--indigo); }
.crayon .card { padding: 30px 28px; }
.crayon .card h3 { font-size: 23px; }
.crayon .card .k, .crayon .achievement__stat, .crayon .staff-grid b, .crayon .facts b { font-family: var(--hand); font-weight: 700; }
.crayon .achievement { padding: 28px; }
.crayon .achievement__stat { font-size: 40px; color: var(--ct, var(--indigo)); }
.crayon :is(.achievement, .staff-grid > div):nth-child(6n+2) { --ct: #C8443E; }
.crayon :is(.achievement, .staff-grid > div):nth-child(6n+3) { --ct: #2C7F56; }
.crayon :is(.achievement, .staff-grid > div):nth-child(6n+4) { --ct: #A86A08; }
.crayon :is(.achievement, .staff-grid > div):nth-child(6n+5) { --ct: #2572AB; }
.crayon :is(.achievement, .staff-grid > div):nth-child(6n+6) { --ct: #B8437A; }
.crayon .achievement h3 { font-size: 22px; }
.crayon .achievements, .crayon .cards { gap: 30px; }
.crayon .facts b { font-size: 52px; }

/* ---------- Safety and contact icons: a crayon ring in a different colour each ---------- */
.crayon .safety { gap: 36px 40px; }
.crayon .safety__icon, .crayon .contact-strip__icon { position: relative; background: color-mix(in srgb, var(--c, var(--lime)) 14%, #fff); color: var(--indigo-deep); }
.crayon .safety__icon::after, .crayon .contact-strip__icon::after { content: ""; position: absolute; inset: -4px; border: 3px solid var(--c, var(--lime)); border-radius: 48% 52% 45% 55% / 52% 46% 54% 48%; filter: url(#crayon); }
.crayon .safety__item:nth-child(6n+1) .safety__icon { --c: var(--c-leaf); }
.crayon .safety__item:nth-child(6n+2) .safety__icon { --c: var(--c-sky); }
.crayon .safety__item:nth-child(6n+3) .safety__icon { --c: var(--c-gold); }
.crayon .safety__item:nth-child(6n+4) .safety__icon { --c: var(--c-coral); }
.crayon .safety__item:nth-child(6n+5) .safety__icon { --c: var(--c-rose); }
.crayon .safety__item:nth-child(6n+6) .safety__icon { --c: var(--c-indigo); }
.crayon .safety__item h3 { font-size: 22px; }
.crayon .contact-strip { gap: 28px; }
.crayon .contact-strip > div .contact-strip__icon { --c: inherit; }
.crayon .contact-strip h3 { font-family: var(--hand); font-size: 17px; }

/* ---------- Toppers, facilities, notices ---------- */
.crayon .topper img, .crayon .topper__initial { border: 4px solid #fff; box-shadow: 0 0 0 3px var(--tc, var(--lime)), 0 14px 22px -12px rgba(31,32,112,.5); }
.crayon .topper:nth-child(5n+2) { --tc: var(--c-gold); }
.crayon .topper:nth-child(5n+3) { --tc: var(--c-sky); }
.crayon .topper:nth-child(5n+4) { --tc: var(--c-rose); }
.crayon .topper:nth-child(5n+5) { --tc: var(--c-leaf); }
.crayon .topper b { font-family: var(--hand); font-size: 18px; }
.crayon .toppers__group h4 { font-family: var(--hand); font-size: 20px; }
.crayon .facilities { border: 0; gap: 22px; }
.crayon .facility { padding: 30px 12px 24px; }
.crayon .facility::after { border-width: 2.5px; border-style: dashed; }
.crayon .facility h3 { font-size: 19px; }
.crayon .notice { border-bottom: 0; background-image: linear-gradient(90deg, var(--line) 60%, transparent 0); background-size: 14px 2px; background-repeat: repeat-x; background-position: bottom; border-radius: 12px; }
.crayon .notice .date { font-family: var(--hand); font-weight: 700; border-radius: var(--wobble-soft); transform: rotate(-3deg); box-shadow: 3px 4px 0 var(--lime); padding: 10px 0 6px; }
.crayon .notice h3 { font-size: 24px; }

/* ---------- Photos: mounted like prints ---------- */
.crayon .welcome-grid img, .crayon .split img, .crayon .stage img, .crayon .alumni img { border: 10px solid #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--line-soft), var(--lift-up); }
.crayon .welcome-grid img { transform: rotate(-.7deg); }
.crayon .split img { transform: rotate(.8deg); }
.crayon .split.reverse img { transform: rotate(-.8deg); }
.crayon .stage img { transform: rotate(-.8deg); }
.crayon .stage:nth-of-type(even) img { transform: rotate(.8deg); }
.crayon .feed { gap: 22px; }
.crayon .feed img, .crayon .gallery__item { border: 6px solid #fff; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-soft), var(--lift); transition: transform .25s, box-shadow .25s; }
.crayon .feed > :nth-child(odd) img { transform: rotate(-1.2deg); }
.crayon .feed > :nth-child(even) img { transform: rotate(1deg); }
.crayon .feed a:hover img, .crayon .gallery__item:hover { transform: rotate(0) scale(1.03); box-shadow: 0 0 0 1px var(--line-soft), var(--lift-up); }
.crayon .gallery { gap: 20px; }
.crayon .gallery-event header { border-bottom: 0; background: linear-gradient(90deg, var(--line) 60%, transparent 0) bottom / 14px 2px repeat-x; }
.crayon .cutting { border-top: 0; }
.crayon .cutting__img { border-radius: 16px 10px 0 0 / 12px 18px 0 0; }
.crayon .cutting h2 { font-size: 22px; }
.crayon .map { border: 10px solid #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--line-soft), var(--lift); }

/* ---------- Inner page blocks ---------- */
.crayon .stage { border-top: 0; background: linear-gradient(90deg, var(--line) 60%, transparent 0) top / 14px 2px repeat-x; padding: 52px 0; }
.crayon .stage:first-of-type { background: none; }
.crayon .stage h2 { font-size: 30px; }
.crayon .stage .tag { font-family: var(--hand); font-weight: 700; font-size: 15px; letter-spacing: .03em; text-transform: none; border-radius: var(--wobble); padding: 6px 16px 3px; transform: rotate(-2deg); }
.crayon .person .photo { border-radius: var(--wobble-soft); box-shadow: 6px 7px 0 var(--lime), var(--lift); }
.crayon .person .photo b { font-family: var(--hand); }
.crayon .person h2 { font-size: 30px; }
.crayon .person blockquote { border-left: 0; padding-left: 26px; background: linear-gradient(var(--lime), var(--lime)) left top / 5px 100% no-repeat; border-radius: 4px; }
.crayon .person .sign { font-family: var(--hand); font-size: 20px; color: var(--indigo); }
.crayon .staff-grid { gap: 24px; }
.crayon .staff-grid b { font-size: 40px; color: var(--ct, var(--indigo)); }
.crayon .motto .sa { font-size: clamp(26px, 3.6vw, 38px); }
.crayon .steps { gap: 22px; }
.crayon .steps li { padding-left: 66px; min-height: 48px; }
.crayon .steps li::before { width: 48px; height: 48px; font-family: var(--hand); font-size: 24px; border-radius: 52% 48% 55% 45% / 48% 54% 46% 52%; background: var(--c, var(--indigo)); color: #fff; box-shadow: 3px 3px 0 var(--lime); transform: rotate(-4deg); padding-top: 4px; }
.crayon .steps li:nth-child(5n+2) { --c: var(--c-coral); }
.crayon .steps li:nth-child(5n+3) { --c: var(--c-leaf); }
.crayon .steps li:nth-child(5n+4) { --c: #D08A16; }
.crayon .steps li:nth-child(5n+5) { --c: #2F7FB8; }
.crayon .steps b { font-family: var(--hand); font-size: 21px; }
.crayon .admissions__sub { font-size: 24px; }
.crayon .disclosure h2 { border-bottom: 0; padding-bottom: 14px; background: var(--lime); background: none; position: relative; font-size: 28px; }
.crayon .disclosure h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--lime); -webkit-mask: var(--stroke) center / 100% 100% no-repeat; mask: var(--stroke) center / 100% 100% no-repeat; }
.crayon .contact-cards { gap: 30px; }
.crayon .contact-cards h3 { font-size: 24px; }

/* ---------- Forms and tables ---------- */
.crayon .form fieldset { border: 2px solid var(--line-soft); border-radius: 18px; padding: 26px 26px 12px; box-shadow: var(--lift); }
.crayon .form legend { font-family: var(--hand); font-weight: 700; font-size: 21px; padding: 0 10px; }
.crayon .field input, .crayon .field select, .crayon .field textarea { border-width: 1.5px; border-radius: 12px; background: #FDFCF8; }
.crayon .field input:focus, .crayon .field select:focus, .crayon .field textarea:focus { background: #fff; border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(191,215,48,.45); }
.crayon .table-wrap { border-radius: 16px; box-shadow: 0 0 0 2px var(--indigo), var(--lift); background: #fff; }
.crayon .table-wrap table { border-style: hidden; }
.crayon th { font-family: var(--hand); font-weight: 700; font-size: 17px; }
.crayon tbody tr:nth-child(even) { background: var(--paper); }
.crayon .form__status.is-info, .crayon .form__status.is-done { border-radius: 14px; }

/* ---------- Reviews ---------- */
.crayon .reviews__list { gap: 24px; padding: 6px 4px 10px; }
.crayon .review figcaption, .crayon .reviews__brand { font-family: var(--hand); font-weight: 700; }
.crayon .reviews__score b { font-family: var(--hand); font-size: 48px; }
.crayon .review__avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c, var(--lime)); }

/* ---------- Footer ---------- */
.crayon .footer h2 { font-family: var(--hand); font-weight: 700; font-size: 22px; }
.crayon .social-link { border-width: 2px; border-radius: 52% 48% 55% 45% / 48% 54% 46% 52%; }
.crayon .copy { border-top: 0; background: linear-gradient(90deg, rgba(255,255,255,.3) 60%, transparent 0) top / 14px 2px repeat-x; }

@media (max-width: 900px) {
  .crayon .hero + .band::before, .crayon .pagehead + .band::before, .crayon .pagehead + [hidden] + .band::before, .crayon .footer::before { top: -15px; height: 16px; }
  .crayon .hero + .band::after, .crayon .pagehead + .band::after, .crayon .pagehead + [hidden] + .band::after, .crayon .footer::after { top: -17px; height: 16px; }
  .crayon .footer { margin-top: 15px; }
  .crayon .welcome-grid img, .crayon .split img, .crayon .stage img { border-width: 7px; }
  .crayon .shadow-title { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .crayon .btn:hover, .crayon .why__item:hover, .crayon .card:hover, .crayon .achievement:hover, .crayon .cutting:hover, .crayon .facility:hover { transform: none; }
}
@media print {
  .crayon .band { background-image: none !important; padding-block: 24px; }
  .crayon :is(.why__item, .achievement, .card, .review, .cutting, .facility)::after { filter: none; }
}