/* Kala Sangam 2027 registration, "Ek rekha" skin (27-10-2026).
   Same Mor palette, type and form language as the homepage enrol form in /assets/ekrekha/style.css.
   One alta line, a ghungroo string, runs down the left lane of the page; each form section is a bead
   on it and a marigold bell sits at its tip. With scroll-driven animation support and motion allowed,
   the line draws with scroll; otherwise (reduced motion, reduced data, older browsers) it is fully drawn.
   Previous skin: website/archive/registration.css.pre-ekrekha-2026-10-27 */
@font-face{font-family:'Amita';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/ekrekha/fonts/amita-700-devanagari.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A}
@font-face{font-family:'Amita';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/ekrekha/fonts/amita-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hind';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/ekrekha/fonts/hind-400-devanagari.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A}
@font-face{font-family:'Hind';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/ekrekha/fonts/hind-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hind';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/ekrekha/fonts/hind-500-devanagari.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A}
@font-face{font-family:'Hind';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/ekrekha/fonts/hind-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hind';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/ekrekha/fonts/hind-600-devanagari.woff2) format('woff2');unicode-range:U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A}
@font-face{font-family:'Hind';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/ekrekha/fonts/hind-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --night:#14123B;
  --night-2:#1F1C55;
  --deep:#0E0C2B;
  --peacock:#0F6E78;
  --peacock-2:#3FC1B8;
  --marigold:#F4A51C;
  --alta:#D3123E;
  --moon:#F5F3FA;
  --ink:#1B1838;
  --ink-2:rgba(27,24,56,.76);
  --rule:rgba(27,24,56,.14);
  --field-line:rgba(27,24,56,.4);
  --display:'Amita','Hind',Georgia,serif;
  --text:'Hind',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --lane:72px;        /* left gutter that carries the line */
  --line-x:34px;      /* line position inside the gutter */
  --line-w:2.6px;
  --bead:44px;        /* section beads, same family as the homepage .step-bead */
  --fp:clamp(20px,3.6vw,40px); /* form card padding */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--moon);color:var(--ink);font-family:var(--text);font-size:clamp(17px,.35vw + 15.6px,19px);line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--peacock);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;transition:color .2s}
a:hover{color:var(--alta)}
p{margin:0 0 1em;max-width:60ch}
strong,b{font-weight:600}
::selection{background:var(--marigold);color:var(--ink)}
:focus-visible{outline:3px solid var(--peacock);outline-offset:3px;border-radius:4px}

/* ---------- page + the line ---------- */
main{position:relative;max-width:calc(780px + var(--lane));margin:0 auto;padding:clamp(28px,4vw,56px) 24px clamp(110px,11vw,150px) var(--lane)}
main::before{content:"";position:absolute;left:calc(var(--line-x) - var(--line-w) / 2);top:clamp(44px,5vw,72px);bottom:64px;width:var(--line-w);border-radius:var(--line-w);background:var(--alta);transform-origin:50% 0;pointer-events:none}
/* the bell at the tip of the string, landing on sam beneath the form */
main::after{content:"";position:absolute;left:calc(var(--line-x) - 12px);bottom:40px;width:24px;height:24px;border-radius:50%;background:var(--marigold);border:1.6px solid var(--ink);box-shadow:0 0 0 6px rgba(211,18,62,.16);pointer-events:none}

/* ---------- header ---------- */
.site-header{position:relative;padding:0 0 clamp(28px,3vw,40px)}
.site-header::before{content:"";position:absolute;left:calc(-1 * (var(--lane) - var(--line-x)) - 9px);top:calc(clamp(44px,5vw,72px) - clamp(28px,4vw,56px) - 9px);width:18px;height:18px;border-radius:50%;background:var(--moon);border:1.6px solid var(--ink)}
.brand{display:inline-block;background:var(--moon);border:1px solid var(--rule);border-radius:12px;padding:10px 12px;margin-bottom:clamp(26px,3vw,40px);text-decoration:none}
.brand img{width:84px;height:auto}
.eyebrow,.section-kicker{display:flex;align-items:center;gap:10px;font-weight:500;font-size:16px;line-height:1.4;color:var(--ink-2);margin:0 0 14px;max-width:none}
.eyebrow::before,.section-kicker::before{content:"";flex:none;width:28px;height:2px;background:var(--alta);border-radius:2px}
h1,h2{margin:0;font-weight:600;text-wrap:balance}
h1{font-size:clamp(44px,6.4vw,84px);line-height:1.04;letter-spacing:-.022em;margin:0 0 .3em;max-width:14ch}
h1 span{display:block;font-family:var(--display);font-weight:700;color:var(--alta);letter-spacing:0;line-height:1.2;font-size:1.06em}
.lead{font-size:clamp(19px,1.35vw,22px);line-height:1.6;color:var(--ink);max-width:44ch;margin-bottom:.6em}
.partner{color:var(--ink-2);margin-bottom:.4em}
.partner strong{color:var(--ink)}
.event-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-weight:500;font-size:16px;color:var(--peacock)}
.notice{background:rgba(244,165,28,.14);border-left:3px solid var(--marigold);border-radius:0 8px 8px 0;padding:14px 18px;margin:24px 0 0;font-size:17px;line-height:1.65;color:var(--ink);max-width:62ch}
.notice strong{color:var(--ink)}

/* ---------- page nav ---------- */
.page-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin:0 0 clamp(20px,2.4vw,32px);padding:4px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.page-nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:16px;text-underline-offset:6px}

/* ---------- cards: form, success, errors ---------- */
form,.success,.error-summary{position:relative;background:var(--moon);color:var(--ink);border:1px solid var(--rule);border-radius:14px;box-shadow:0 30px 60px -36px rgba(14,12,43,.45)}
form{padding:var(--fp)}

/* ---------- sections: each one a bead on the string ---------- */
.form-section{border:0;border-top:1px solid var(--rule);margin:0 0 8px;padding:clamp(28px,3vw,40px) 0 clamp(8px,1vw,12px);min-width:0}
.form-section:first-of-type{border-top:0;padding-top:0}
.form-section > legend{position:relative;display:block;width:100%;padding:0;margin:0 0 18px;font-weight:600;font-size:clamp(23px,1.9vw,29px);line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.form-section > legend .section-kicker{margin-bottom:8px;letter-spacing:0}
.step{position:absolute;top:-4px;left:calc(-1 * (var(--fp) + 1px + var(--lane) - var(--line-x)) - var(--bead) / 2);width:var(--bead);height:var(--bead);border-radius:50%;display:grid;place-items:center;background:var(--moon);border:1.6px solid var(--ink);color:var(--ink);font:600 17px/1 var(--text);letter-spacing:0;transition:background-color .3s,transform .3s var(--ease)}
.form-section:focus-within .step{background:var(--marigold);transform:scale(1.06)}

/* ---------- fields ---------- */
label{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:8px;font-weight:500;font-size:16px;line-height:1.45;margin:0 0 20px}
label > input,label > select{flex:1 1 100%}
.optional{font-weight:400;font-size:14.5px;color:var(--ink-2);background:rgba(27,24,56,.06);border-radius:999px;padding:1px 10px}
.hint{display:block;flex:1 1 100%;font-weight:400;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
input,select{font:400 17px var(--text);color:var(--ink);background:var(--moon);border:1.5px solid var(--field-line);border-radius:8px;min-height:50px;padding:0 14px;width:100%;margin:0;transition:border-color .2s}
input:hover,select:hover{border-color:var(--ink)}
input[type=number]{max-width:14rem}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1838' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px;padding-right:44px;cursor:pointer}
input:focus-visible,select:focus-visible{outline:3px solid var(--peacock);outline-offset:1px;border-color:var(--peacock);border-radius:8px}
input[aria-invalid="true"]{border-color:var(--alta);border-width:2px}
/* the PHP marks only the name field with aria-invalid; every other field is followed directly by its .error message */
label:has(+ .error) > input:not([type=checkbox]):not([type=radio]),label:has(+ .error) > select{border-color:var(--alta);border-width:2px}
#field-entry_type:has(+ .error) .choice{border-color:var(--alta)}
.choice:has(+ .error) > input{outline:2px solid var(--alta);outline-offset:2px}
input:disabled,select:disabled{opacity:.5;cursor:not-allowed}
.field-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}

/* checkbox statements: box in its own column, wrapped text aligned beside it */
input[type=checkbox],input[type=radio]{flex:none;width:22px;height:22px;min-height:0;padding:0;margin:0;accent-color:var(--alta);cursor:pointer}
.choice{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:start;font-weight:400;font-size:17px;line-height:1.6;max-width:62ch;padding:6px 0;cursor:pointer}
.choice > input{margin-top:3px}
.choice > .hint{grid-column:2}

/* entry type: radios become chips, same as the homepage enrol form */
#field-entry_type{border:0;margin:0 0 20px;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
#field-entry_type legend{float:left;width:100%;padding:0;margin:0 0 10px;font-weight:500;font-size:16px;line-height:1.45}
#field-entry_type .choice{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;margin:0;border:1.5px solid rgba(27,24,56,.35);border-radius:999px;font-weight:500;font-size:16px;transition:background-color .2s,color .2s,border-color .2s}
#field-entry_type .choice > input{margin:0;width:18px;height:18px}
#field-entry_type .choice:hover{border-color:var(--ink)}
#field-entry_type .choice:has(input:checked){background:var(--ink);color:var(--moon);border-color:var(--ink)}
#field-entry_type .choice:has(input:checked) > input{accent-color:var(--marigold)}
#field-entry_type .choice:has(input:focus-visible){outline:3px solid var(--peacock);outline-offset:2px}
#field-entry_type .choice > input:focus-visible{outline:0}

/* solo / group fields toggled by registration.js; must stay hidden whatever display the label has */
.conditional.is-hidden{display:none!important}

/* honeypot: off-screen but rendered, never display:none */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- messages ---------- */
.error{color:var(--alta);font-weight:600;font-size:16px;line-height:1.5;margin:-10px 0 18px}
.error-summary{border-left:4px solid var(--alta);padding:20px 22px;margin:0 0 20px;font-size:17px}
.error-summary:focus{outline:3px solid var(--peacock);outline-offset:3px}
.error-summary:focus:not(:focus-visible){outline:0}
.error-summary strong{color:var(--alta);font-weight:600}
.error-summary ul{margin:10px 0 0;padding-left:1.2em}
.error-summary li{margin:2px 0}
.error-summary a{color:var(--alta);font-weight:500;display:inline-flex;align-items:center;min-height:44px}
.error-summary a:hover{color:var(--ink)}
form > .notice{margin:12px 0 18px;font-size:16px}
.privacy-note{font-size:16px;color:var(--ink-2);margin:0 0 6px}
.privacy-note a{white-space:nowrap}

/* ---------- buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;margin-top:16px;border-radius:6px;font:600 16px/1 var(--text);letter-spacing:.01em;text-decoration:none;border:1.5px solid transparent;background:var(--alta);color:var(--moon);cursor:pointer;transition:transform .2s var(--ease),background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.button:hover{color:var(--moon);transform:translateY(-2px);box-shadow:0 8px 22px -10px rgba(211,18,62,.8)}
.button:active{transform:none}
.button:focus-visible{outline-offset:3px}
form > .button{width:100%}
.button.secondary{background:transparent;border-color:var(--ink);color:var(--ink)}
.button.secondary:hover{background:var(--ink);color:var(--moon);box-shadow:none}

/* ---------- success ---------- */
.success{padding:clamp(24px,4vw,48px)}
.success::before{content:"";position:absolute;top:clamp(26px,4vw,50px);left:calc(-1 * (1px + var(--lane) - var(--line-x)) - 12px);width:24px;height:24px;border-radius:50%;background:var(--marigold);border:1.6px solid var(--ink)}
.success h2{font-size:clamp(34px,4.1vw,56px);line-height:1.04;letter-spacing:-.022em;margin:0 0 .45em}
.receipt{display:inline-block;margin:4px 0 1.2em;padding:12px 18px;border:2px dashed var(--marigold);border-radius:8px;background:rgba(244,165,28,.12);color:var(--ink);font-size:clamp(19px,1.5vw,22px);letter-spacing:.12em}
.receipt strong{font-weight:600}

/* ---------- small screens: the lane narrows, the line stays ---------- */
@media (max-width:560px){
  :root{--lane:44px;--line-x:18px;--bead:32px;--fp:18px}
  main{padding-right:16px}
  .brand img{width:72px}
  .step{font-size:14px}
  .field-grid{grid-template-columns:1fr}
  .page-nav a{font-size:15px}
  .choice{font-size:16px}
  #field-entry_type .choice{flex:1 1 0;justify-content:center}
}

/* ---------- motion: the line draws with scroll where supported ---------- */
@keyframes ks-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ks-bell{from{bottom:calc(100% - clamp(44px,5vw,72px) - 12px)}to{bottom:40px}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    main::before{animation:ks-draw linear both;animation-timeline:scroll(root)}
    main::after{animation:ks-bell linear both;animation-timeline:scroll(root)}
  }
}

/* ---------- reduced motion and Save-Data (reduced-data): everything static ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .button:hover,.form-section:focus-within .step{transform:none}
}
@media (prefers-reduced-data:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* Save-Data: registration.js adds html.no-motion when the browser asks to save data */
html.no-motion *,html.no-motion *::before,html.no-motion *::after{animation:none!important;transition:none!important}

/* 27-10-2026 template fixes: skip link, Hindi line, aria-invalid on every control */
.skip-link{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--moon);padding:12px 18px;border-radius:8px;font-weight:600;text-decoration:none;min-height:44px}
.skip-link:focus{top:12px;outline:3px solid var(--peacock);outline-offset:2px}
#ks-content:focus{outline:none}
.hi-line{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.3;color:var(--ink);margin:0 0 .35em;max-width:none}
select[aria-invalid="true"]{border-color:var(--alta);border-width:2px}
input[type=checkbox][aria-invalid="true"]{outline:2px solid var(--alta);outline-offset:2px}