/* Ayantika Academy, Kala Sangam 2027 page in the "Ek rekha" design.
   Shared look comes from /assets/ekrekha/style.css (tokens, nav, footer, buttons, lane grid,
   line layer, toran, steps, FAQ). Only rules specific to this page live here.
   Palette: the Mor tokens from style.css only. Devanagari display lines keep line-height >= 1.2.
   The page's own line moment: the string winds twice round the registration QR plate and
   ends on a bell beneath it. */

/* ---------- hero ---------- */
.ks .hero-hi{line-height:1.22}
.ks-tag{font-weight:600;font-size:clamp(22px,2vw,30px);line-height:1.25;letter-spacing:-.01em;color:var(--ink);margin:0 0 .7em}
.ks-hero-fig{grid-column:8/13;margin:0;justify-self:end;width:100%}
.ks-hero-fig .hero-arch{grid-column:auto}
.hero-arch img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ks-hero-fig .caption{text-align:right}

/* hero facts strung on the line, like the homepage's teentaal string */
.ks-string{grid-column:1/-1;position:relative;margin:clamp(48px,6vw,84px) 0 0}
.ks-beads{margin:0;padding:0 18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);position:relative;z-index:1}
.ks-beads > div{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:20px}
.ks-bead{--head:r;display:block;width:22px;height:22px;flex:none;border-radius:50%;background:var(--moon);border:1.6px solid var(--ink);margin-bottom:12px;transition:background-color .3s}
.ks-beads > div:first-child .ks-bead{border-color:var(--alta);border-width:2.4px}
.ks-bead.rung{background:var(--marigold)}
.ks-beads dt{display:flex;flex-direction:column;align-items:center;font-weight:500;font-size:15px;color:var(--ink-2)}
.ks-beads dd{margin:2px 0 0;font-weight:600;font-size:18px;line-height:1.4;max-width:22ch}
html.js:not(.no-motion) .ks-bead{animation:bead-in .5s var(--ease) backwards;animation-delay:calc(var(--i,0) * 90ms + 300ms)}

/* ---------- about + partnership ---------- */
.ks-about .wrap{align-items:start}
.ks-about-copy{grid-column:2/8}
.ks-about-copy .facts{margin-top:28px}
.ks-pair{grid-column:9/12;margin:0;padding:22px 0 0;border-top:3px solid var(--marigold);align-self:center}
.ks-pair p{margin:0;max-width:none}
.ks-pair-name{font-weight:600;font-size:clamp(22px,1.9vw,28px);line-height:1.2;letter-spacing:-.01em}
.ks-pair-join{display:flex;align-items:center;gap:12px;font-size:17px;color:var(--ink-2);margin:14px 0!important}
.ks-pair-join::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--alta)}

/* ---------- programme (dark) ---------- */
.ks-programme .sec-head p:not(.hi-note){color:var(--moon-2)}
.ks-forms{grid-column:1/12;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.ks-form{position:relative;padding:44px clamp(4px,1vw,16px) 0;text-align:center}
.ks-form .hook{border-color:var(--moon)}
.ks-form-word{font-family:var(--display);font-weight:700;font-size:clamp(40px,4.2vw,64px);line-height:1.25;margin:0 0 .15em;max-width:none}
.ks-form:nth-child(1) .ks-form-word{color:var(--peacock-2)}
.ks-form:nth-child(2) .ks-form-word{color:var(--alta)}
.ks-form:nth-child(3) .ks-form-word{color:var(--marigold)}
.ks-form p:not(.ks-form-word){color:var(--moon-2);margin-inline:auto;max-width:30ch}
.ks-programme .ks-note{grid-column:2/10;margin:clamp(36px,4vw,56px) 0 0;color:var(--moon-2)}

/* ---------- who can enter: the age bands step down the line ---------- */
.ks-enter .sec-head{grid-row:1}
.ks-age-name{font-weight:500;font-size:16px;color:var(--peacock);margin:0 0 4px}
.ks-age{display:block;font-weight:600;font-size:clamp(40px,3.8vw,58px);line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.ks-ages h3{font-size:clamp(19px,1.4vw,22px);font-weight:500;color:var(--ink-2)}
.ks-clarity{grid-column:9/13;grid-row:2;align-self:start;border-top:3px solid var(--marigold);padding-top:16px}
.ks-clarity h3{font-size:clamp(20px,1.5vw,23px)}
.ks-clarity ul{margin:0;padding:0 0 0 1.1em;color:var(--ink-2)}
.ks-clarity li{margin:0 0 .5em}

/* ---------- 2026 toran ---------- */
.q > p a{color:var(--peacock);font-weight:600;text-decoration-thickness:2px;text-underline-offset:4px}
.hang figcaption{font-size:15px;color:var(--ink-2);margin-top:10px;text-align:center}
.ks-gallery .ks-note{grid-column:2/10;margin:clamp(40px,4vw,56px) 0 0;color:var(--ink-2)}

/* ---------- partners (dark) ---------- */
.ks-partners{background:var(--deep)}
.ks-partners .sec-head p:not(.hi-note){color:var(--moon-2)}
.ks-offers{grid-column:2/12}
.ks-offer{position:relative;border-top:1px solid var(--rule-dark);padding:clamp(24px,2.6vw,36px) 0}
.ks-offer-body{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr);gap:var(--gap);align-items:center}
.ks-offer:last-child{border-bottom:1px solid var(--rule-dark)}
.ks-offer h3{margin:0}
.ks-offer p{margin:0;color:var(--moon-2)}
.ks-offer .link-dark{justify-self:end;font-weight:600}
.ks-offer-bead{position:absolute;top:50%;margin-top:-9px;left:calc(-1 * (var(--gap) + (100cqw - 11 * var(--gap)) / 24) - 9px);width:18px;height:18px;border-radius:50%;background:var(--night-2);border:1.6px solid var(--moon);transition:background-color .3s}
.ks-offer-bead.rung{background:var(--marigold);border-color:var(--marigold)}
.ks-call{grid-column:2/10;margin:28px 0 0;color:var(--moon-2)}
.ks-call a{color:var(--moon);font-weight:600;text-underline-offset:5px;display:inline-flex;min-height:44px;align-items:center}

/* ---------- register: the line winds round the QR plate ---------- */
.ks-register .enrol-copy{grid-column:7/12;grid-row:1}
.ks-register .enrol-copy h2{max-width:18ch}
.ks-qr-wrap{grid-column:2/6;grid-row:1;position:relative;justify-self:center;margin-top:clamp(56px,6vw,96px)}
.ks-qr{margin:0;background:var(--moon);color:var(--ink);border-radius:14px;padding:18px 18px 12px;width:min(260px,100%);text-align:center}
.ks-qr img{width:100%;height:auto;image-rendering:pixelated}
.ks-qr figcaption{font-weight:600;font-size:16px;margin-top:10px}
.ks-end{left:50%;top:calc(100% + 64px)}
/* mobile only: keeps the line in the gutter past the copy, then turns in to the QR plate */
.ks-qr-in{left:-32px;top:-24px}

/* ---------- nav fit on mid widths ---------- */
@media (min-width:900px) and (max-width:1199px){
  .nav{gap:16px}
  .nav-links a{padding:10px 8px;font-size:15px}
  .nav-links a::after{left:8px;right:8px}
  .nav-xl{display:none!important}
}

/* ---------- tablet / mobile ---------- */
@media (max-width:899px){
  .ks-hero-fig{margin-top:34px}
  .ks-hero-fig .hero-arch{margin-top:0}
  .ks-hero-fig .caption{text-align:left}
  .ks-string{margin-top:44px}
  .ks-string .string-start,.ks-string .string-end{display:none}
  .ks-beads{display:block;padding:0}
  .ks-beads > div{display:block;position:relative;text-align:left;padding:0 0 22px}
  .ks-bead{--head:d;position:absolute;left:-43px;top:3px;margin:0}
  .ks-beads dt{display:block}
  .ks-beads dd{max-width:none}

  .ks-pair{margin-top:40px}
  .ks-forms{display:block}
  .ks-form{text-align:left;padding:0 0 32px}
  .ks-form p:not(.ks-form-word){margin-inline:0}
  .ks-programme .ks-note{margin-top:8px}

  .ks-clarity{margin-top:8px}
  .ks-gallery .ks-note{margin-top:28px}

  .ks-offer{padding:22px 0}
  .ks-offer-body{display:block}
  .ks-offer h3{margin-bottom:8px}
  .ks-offer p{margin-bottom:6px}
  .ks-offer-bead{left:-41px;top:30px;margin-top:0}

  .ks-qr-wrap{margin-top:48px;justify-self:start;width:max-content}
  .ks-qr{width:220px}
  .ks-end{top:calc(100% + 56px)}
  .mobile-bar{grid-template-columns:1fr 1fr 1.7fr}
  .mobile-bar a{font-size:15px}
}