/* LJP(R) उत्तर प्रदेश युवा ब्रिगेड - redesign of ljprupyuva.org
   Content, form field names, FAQ text, address and socials preserved.
   Language: institutional, structured, cool paper. Deliberately distinct from
   the personal site so the two never read as one template.
   Theme locked light. Radius: pill buttons, 2px everything else. */

@view-transition { navigation: auto; }

:root{
  --paper:   oklch(0.972 0.003 250);
  --paper-2: oklch(0.945 0.005 250);
  --paper-3: oklch(0.912 0.008 250);
  --ink:     oklch(0.195 0.020 258);
  --ink-2:   oklch(0.455 0.022 258);
  /* pinned to clear 4.5:1 on --paper: this token carries form hints and
     placeholders, which are functional text, not decoration */
  --ink-3:   oklch(0.520 0.020 258);
  --blue:    oklch(0.432 0.145 262);
  --blue-2:  oklch(0.520 0.160 262);
  --red:     oklch(0.545 0.205 27);
  --green:   oklch(0.520 0.130 152);
  --ok:      oklch(0.430 0.110 155);
  --bad:     oklch(0.505 0.185 27);

  --line:   color-mix(in oklab, var(--ink) 14%, transparent);
  --line-2: color-mix(in oklab, var(--ink) 28%, transparent);

  --wrap: 1180px;
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* The nav is sticky, so an anchor that scrolls its target flush to the top
     parks the section heading underneath it. This covers the case where JS
     never runs; when it does, main.js positions the scroll itself. */
  scroll-padding-top:6rem;
  font-size:clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  font-optical-sizing:auto;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Anek Devanagari",system-ui,sans-serif;
  line-height:1.66; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
html[data-lang="en"] body{ line-height:1.58 }

img{ max-width:100%; height:auto; display:block }
picture{ display:contents }
/* display:contents on <picture> hoists its <source> children into the parent
   grid, where they occupy real cells and shove the <img> into the wrong one.
   Sources must never generate a box. */
picture > source{ display:none }
a{ color:inherit }

:is(h1,h2,h3,.lede,summary){ text-wrap:balance }
:is(p,li,dd){ text-wrap:pretty }
@supports (text-box-edge: cap alphabetic){
  /* .btn excluded: trimming to Latin cap/baseline pushes Devanagari
     off-centre inside the flex button */
  :is(h1,h2,h3,.aim__n){ text-box:trim-both cap alphabetic }
}

.display{
  font-family:"Khand","Anek Devanagari",sans-serif;
  font-weight:600; letter-spacing:.002em; line-height:1.14; margin:0;
}

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto }
@media (max-width:640px){ .wrap{ width:min(100% - 1.75rem, var(--wrap)) } }

.grain{
  position:fixed; inset:0; z-index:80; pointer-events:none;
  opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--blue); color:#fff; padding:.7rem 1.1rem; font-weight:600 }
.skip:focus{ left:1rem; top:1rem }
:where(a,button,input,select,summary,[tabindex]):focus-visible{ outline:2px solid var(--blue-2); outline-offset:2px }

.flagband{ display:flex; height:5px }
.flagband i{ flex:1 }
.flagband i:nth-child(1){ background:var(--blue) }
.flagband i:nth-child(2){ background:var(--red) }
.flagband i:nth-child(3){ background:var(--green) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  padding:.8rem 1.65rem; border-radius:999px; border:1.5px solid var(--blue);
  background:var(--blue); color:#fff; cursor:pointer; text-decoration:none;
  font-family:inherit; font-weight:600; font-size:1.02rem; line-height:1;
  transition:background .25s var(--ease), transform .2s var(--ease), border-color .25s var(--ease);
}
.btn:hover{ background:var(--blue-2); border-color:var(--blue-2) }
.btn:active{ transform:translateY(1px) scale(.985) }
.btn--sm{ padding:.52rem 1.15rem; font-size:.95rem }
.btn--ghost{ background:transparent; color:var(--blue) }
.btn--ghost:hover{ background:color-mix(in oklab,var(--blue) 10%,transparent); border-color:var(--blue) }
.btn--dark{ background:var(--ink); border-color:var(--ink) }
.btn--dark:hover{ background:var(--blue); border-color:var(--blue) }
/* for use on the ink-ground vote band, where a blue fill would sink into it */
.btn--light{ background:var(--paper); border-color:var(--paper); color:var(--ink) }
.btn--light:hover{ background:var(--blue); border-color:var(--blue); color:#fff }
button.btn[disabled]{ opacity:.6; cursor:progress }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px) saturate(1.4); -webkit-backdrop-filter:blur(10px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease);
}
@media (prefers-reduced-transparency:reduce){ .nav{ background:var(--paper) } }
.nav.is-stuck{ border-bottom-color:var(--line) }
.nav__in{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; height:74px; display:flex; align-items:center; gap:1.4rem }
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto }
.brand img{ width:42px; height:42px; flex:0 0 auto }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15 }
.brand__txt b{ font-family:"Khand",sans-serif; font-size:1.2rem; font-weight:700 }
.brand__txt i{ font-style:normal; font-size:.78rem; color:var(--ink-3) }
.nav__links{ display:flex; gap:1.5rem }
.nav__links a{ text-decoration:none; color:var(--ink-2); font-size:.98rem; font-weight:500; transition:color .2s var(--ease) }
.nav__links a:hover{ color:var(--blue) }

.lang{ display:flex; border:1.5px solid var(--line-2); border-radius:999px; overflow:hidden; flex:0 0 auto }
.lang button{ font-family:inherit; font-size:.83rem; font-weight:600; cursor:pointer; padding:.36rem .7rem; border:0; background:transparent; color:var(--ink-2); transition:background .2s var(--ease), color .2s var(--ease) }
.lang button:hover{ color:var(--ink) }
.lang button.is-on{ background:var(--blue); color:#fff }

.burger{ display:none; width:42px; height:42px; border-radius:999px; border:1.5px solid var(--line-2); background:transparent; cursor:pointer; padding:0; place-items:center; gap:5px }
.burger span{ display:block; width:17px; height:1.5px; background:var(--ink) }
.drawer{ display:none; flex-direction:column; padding:.25rem 1.25rem 1.25rem; border-top:1px solid var(--line); background:var(--paper) }
.drawer a{ padding:.75rem 0; text-decoration:none; border-bottom:1px solid var(--line); font-size:1.05rem }
.drawer a:last-child{ border-bottom:0; color:var(--blue); font-weight:700 }
@media (max-width:980px){
  .nav__links,.nav .btn--sm{ display:none }
  .burger{ display:grid }
  .drawer[data-open]{ display:flex }
}

/* ---------- hero ---------- */
.hero{
  padding:3.6rem 0 3.4rem; border-bottom:1px solid var(--line);
  position:relative; isolation:isolate;
  background-image:image-set(url("../assets/hero-rays@1x.avif") type("image/avif"),
                             url("../assets/hero-rays@1x.webp") type("image/webp"));
  background-size:cover; background-position:50% 45%; background-repeat:no-repeat;
}
@media (min-width:981px){
  .hero{ background-image:image-set(url("../assets/hero-rays.avif") type("image/avif"),
                                    url("../assets/hero-rays.webp") type("image/webp")) }
}
.hero__grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:3rem; align-items:center }
.hero h1{ font-size:clamp(2.3rem,5vw,4.1rem) }
.lede{ margin:1.3rem 0 0; max-width:46ch; font-size:clamp(1.05rem,1.4vw,1.18rem); color:var(--ink-2) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem }
.hero__count{ margin:1.6rem 0 0; color:var(--ink-2); font-size:.98rem }
.hero__count b{ font-family:"Khand",sans-serif; font-size:1.6rem; color:var(--blue); font-weight:700; margin-right:.3rem }
.hero__badge img{ width:100%; max-width:330px; margin-inline:auto }
@media (max-width:980px){
  .hero{ padding:2.2rem 0 2.4rem }
  .hero__grid{ grid-template-columns:1fr; gap:1.8rem }
  .hero__badge{ order:-1 }
  .hero__badge img{ max-width:180px }
}

/* ---------- uddeshya ---------- */
.sec-h{ font-size:clamp(1.9rem,3.6vw,2.9rem) }
.uddeshya{ padding:4.5rem 0 }
.aims{ list-style:none; margin:2.4rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem }
.aim{ background:var(--paper); border:1px solid var(--line); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .35s var(--ease), transform .35s var(--ease) }
.aim:hover{ border-color:var(--blue); transform:translateY(-4px) }
.aim__art{ display:block; overflow:hidden; background:#fff }
.aim__art img{ width:100%; height:auto; display:block;
  transition:transform .6s var(--ease) }
.aim:hover .aim__art img{ transform:scale(1.045) }
.aim__body{ padding:1.1rem 1.15rem 1.35rem }
.aim__n{ display:block; font-family:"Khand",sans-serif; font-weight:700; font-size:1.5rem;
  color:var(--blue); line-height:1; margin-bottom:.35rem }
.aim p{ margin:0; font-size:1rem; color:var(--ink-2) }
@media (max-width:1000px){ .aims{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .aims{ grid-template-columns:1fr } }

@media (max-width:700px){ .uddeshya{ padding:3rem 0 } }

/* ---------- yuva aayog: the headline demand ---------- */
.kicker{
  margin:0 0 .9rem; font-size:.78rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--blue);
}
.aayog{ padding:0 0 4.5rem }
.aayog__grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start }
.aayog h2{ font-size:clamp(1.9rem,3.6vw,2.9rem) }
.aayog__copy>p{ margin:1.2rem 0 0; color:var(--ink-2); max-width:56ch }
.aayog__copy>p b{ color:var(--ink); font-weight:600 }
.aayog .btn{ margin-top:1.8rem }
/* counter, not <ol> markers: the numeral is display type, not a list bullet */
.demands{ counter-reset:d; list-style:none; margin:0; padding:0; border-top:2px solid var(--ink) }
.demands li{
  position:relative; padding:1.15rem 0 1.15rem 3rem;
  border-bottom:1px solid var(--line);
}
.demands li::before{
  counter-increment:d; content:counter(d,decimal-leading-zero);
  position:absolute; left:0; top:1.15rem;
  font-family:"Khand",sans-serif; font-weight:700; font-size:1.35rem;
  color:var(--blue); line-height:1.2;
}
.demands h3{ font-family:"Khand",sans-serif; font-weight:600; font-size:1.28rem; margin:0 0 .15rem }
.demands p{ margin:0; color:var(--ink-2); max-width:52ch }
@media (max-width:980px){
  .aayog{ padding:0 0 3rem }
  .aayog__grid{ grid-template-columns:1fr; gap:2rem }
}

/* ---------- vote appeal ---------- */
.vote{ background:var(--ink); color:color-mix(in oklab,var(--paper) 92%,transparent); padding:4rem 0 }
.vote__in{ max-width:56rem }
.vote h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); color:#fff }
.vote p{ margin:1.2rem 0 0; max-width:56ch }
.vote__cta{ margin-top:2rem }
@media (max-width:700px){ .vote{ padding:3rem 0 } }

/* ---------- dost ---------- */
.dost{ padding:0 0 4.5rem }
.dost__grid{ display:grid; grid-template-columns:.78fr 1.22fr; gap:3rem; align-items:center }
.dost__img{ margin:0 }
.dost__img img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:40% 22%;
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
}
.dost h2{ font-size:clamp(1.7rem,3.2vw,2.5rem) }
.dost__sub{ margin:.7rem 0 0; font-size:1.12rem; color:var(--blue); font-weight:600 }
.dost p{ margin:1.2rem 0 0; color:var(--ink-2); max-width:62ch }
.dost p b{ color:var(--ink); font-weight:600 }
.perks{ margin:1.6rem 0 0; padding:0; list-style:none; display:grid; gap:.65rem }
.perks li{ position:relative; padding-left:1.6rem; color:var(--ink-2) }
.perks li::before{ content:""; position:absolute; left:0; top:.68em; width:8px; height:8px; background:var(--blue) }
@media (max-width:980px){
  .dost{ padding:0 0 3rem }
  .dost__grid{ grid-template-columns:1fr; gap:2rem }
  .dost__img img{ aspect-ratio:16/10; object-position:40% 18% }
}

/* ---------- art band ---------- */
.artband{ position:relative; isolation:isolate; background:var(--ink); overflow:hidden }
/* broadcast arcs: the Digital Dost idea made literal, rising out of the crowd */
.pulse{ position:absolute; inset:auto 0 0 0; width:min(680px,72%); margin-inline:auto;
  height:70%; pointer-events:none; overflow:visible }
.pulse__ring{ fill:none; stroke:var(--blue); stroke-width:1.4; opacity:0 }
.artband img{ width:100%; height:clamp(280px,46vh,460px); object-fit:cover; object-position:50% 42%; opacity:.9 }
.artband__over{ position:absolute; inset:0; display:grid; align-items:center;
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto }
/* the illustration's upper region is pale, so the type is ink, not white */
.artband__txt{ font-size:clamp(2rem,5.4vw,4rem); color:var(--ink); margin:0;
  text-shadow:0 1px 18px color-mix(in oklab, #fff 85%, transparent) }

/* ---------- register ---------- */
.register{ background:var(--paper-2); border-block:1px solid var(--line); padding:4.5rem 0 }
.register__grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:3rem; align-items:start }
.register h2{ font-size:clamp(1.9rem,3.6vw,2.9rem) }
.register__intro p{ margin:1rem 0 0; color:var(--ink-2); max-width:32ch }

.form{ background:var(--paper); border:1px solid var(--line-2); padding:1.9rem }
.field{ display:flex; flex-direction:column; gap:.38rem; margin-bottom:1.05rem }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem }
label{ font-size:.94rem; font-weight:600 }
.opt{ font-weight:400; color:var(--ink-3) }
input,select{
  font-family:inherit; font-size:1rem; color:var(--ink); width:100%;
  padding:.7rem .85rem; border:1.5px solid var(--line-2); border-radius:2px;
  background:var(--paper); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input::placeholder{ color:var(--ink-3) }
input:focus,select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in oklab,var(--blue) 18%,transparent) }
input[type=file]{ padding:.5rem .6rem; background:var(--paper-2) }
.hint{ margin:0; font-size:.85rem; color:var(--ink-3) }
.err{ margin:0; font-size:.87rem; color:var(--bad); font-weight:500 }
.field.is-bad input,.field.is-bad select{ border-color:var(--bad) }
/* the stored thumbnail, shown at the size it is actually kept: the visitor
   should see what the campaign will see, not the 12 MP original */
.thumb{ display:flex; align-items:center; gap:.6rem; margin:.55rem 0 0 }
.thumb img{ width:72px; height:72px; object-fit:cover; border:1px solid var(--line-2) }
.thumb figcaption{ font-size:.85rem; color:var(--ink-3) }

/* the support pledge: the form doubles as a signature on the demand */
.check{
  display:flex; gap:.65rem; align-items:flex-start;
  margin:.35rem 0 0; padding:.85rem .95rem;
  background:color-mix(in oklab,var(--blue) 7%,var(--paper));
  border-left:3px solid var(--blue);
  font-size:.96rem; font-weight:500; line-height:1.5; cursor:pointer;
}
/* the generic input rule above sizes text fields; a checkbox must opt out of
   all of it or it renders as a full-width padded box */
.check input{
  width:1.15rem; height:1.15rem; flex:0 0 auto;
  padding:0; border:0; margin:.18rem 0 0; accent-color:var(--blue);
}
.form__actions{ display:flex; gap:.7rem; margin-top:1.4rem; flex-wrap:wrap }
.form__ok{ margin:1.05rem 0 0; padding:.8rem 1.05rem; background:color-mix(in oklab,var(--ok) 14%,var(--paper)); color:var(--ok); font-weight:600; font-size:.97rem; border-left:3px solid var(--ok) }
/* a failed write must read as clearly as a successful one, or the visitor
   walks away believing the campaign has their number */
.form__bad{ margin:1.05rem 0 0; padding:.8rem 1.05rem; background:color-mix(in oklab,var(--bad) 12%,var(--paper)); color:var(--bad); font-weight:600; font-size:.97rem; border-left:3px solid var(--bad) }
@media (max-width:980px){
  .register{ padding:3rem 0 }
  .register__grid{ grid-template-columns:1fr; gap:2rem }
  .form{ padding:1.3rem }
}
@media (max-width:560px){ .row2{ grid-template-columns:1fr; gap:0 } }

/* ---------- sadasyata ---------- */
.sadasyata{ padding:4.5rem 0 }
.sadasyata__in{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center }
.sadasyata h2{ font-size:clamp(1.7rem,3.2vw,2.5rem) }
.sadasyata__in>div>p{ margin:.8rem 0 0; color:var(--ink-2) }
.mobform label{ display:block; margin-bottom:.42rem; font-size:.94rem; font-weight:600 }
.mobform__row{ display:flex; align-items:stretch; gap:.55rem }
.cc{ display:grid; place-items:center; padding:0 .9rem; border:1.5px solid var(--line-2); background:var(--paper-3); font-weight:600; color:var(--ink-2) }
.mobform__row input{ flex:1; min-width:0 }
.mobform .err{ margin-top:.5rem }
@media (max-width:980px){
  .sadasyata{ padding:3rem 0 }
  .sadasyata__in{ grid-template-columns:1fr; gap:1.5rem }
}
@media (max-width:540px){
  .mobform__row{ flex-wrap:wrap }
  .mobform__row .btn{ width:100% }
}

/* ---------- faq ---------- */
.faq{ padding:0 0 5rem }
.acc{ margin-top:2rem; border-top:2px solid var(--ink) }
.acc details{ border-bottom:1px solid var(--line) }
summary{
  list-style:none; cursor:pointer; padding:1.2rem 2.5rem 1.2rem 0; position:relative;
  font-family:"Khand",sans-serif; font-size:1.28rem; font-weight:600;
}
summary::-webkit-details-marker{ display:none }
summary::after{
  content:""; position:absolute; right:.5rem; top:50%; width:10px; height:10px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease);
}
details[open] summary::after{ transform:translateY(-20%) rotate(-135deg) }
summary:hover{ color:var(--blue) }
.acc__body{ padding:0 0 1.4rem; color:var(--ink-2); max-width:72ch }
.acc__body p{ margin:0 0 .65rem }
.acc__body p:last-child{ margin-bottom:0 }
.acc__body ul{ margin:.4rem 0 0; padding-left:1.15rem }
.acc__body li{ margin-bottom:.32rem }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:color-mix(in oklab,var(--paper) 82%,transparent); padding:3.5rem 0 0 }
.foot__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem }
.foot__badge{ width:60px; height:60px; margin-bottom:.85rem }
.foot__name{ margin:0; font-family:"Khand",sans-serif; font-weight:700; color:#fff; font-size:1.2rem }
.foot p{ margin:0; font-size:.96rem; line-height:1.7 }
.foot h3{ font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:color-mix(in oklab,var(--blue) 55%,#fff); font-weight:600; margin:0 0 .65rem }
.foot__followers b{ color:#fff; font-family:"Khand",sans-serif; font-size:1.25rem }
.foot__links{ display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; margin-top:.8rem !important }
.foot__links a,.maplink{ text-decoration:none; color:color-mix(in oklab,var(--paper) 66%,transparent); transition:color .2s var(--ease) }
.foot__links a:hover,.maplink:hover{ color:#fff }
.maplink{ display:inline-block; margin-top:.65rem; border-bottom:1px solid color-mix(in oklab,var(--paper) 34%,transparent); padding-bottom:1px }
.foot__base{ border-top:1px solid color-mix(in oklab,var(--paper) 16%,transparent); padding:1.3rem 0 }
.foot__base p{ font-size:.87rem; color:color-mix(in oklab,var(--paper) 52%,transparent) }
@media (max-width:980px){
  .foot{ padding-top:2.5rem }
  .foot__grid{ grid-template-columns:1fr; gap:2rem; padding-bottom:2rem }
}

/* Nothing here hides content: entrance motion animates out of the settled
   state, so a script failure costs an animation, never a blank section. */

/* Native-script labels are the Indian convention (हिंदी, not HI); the
   abbreviation only appears where the bar is too narrow for the full word. */
.lang__abbr{ display:none }
@media (max-width:1120px){
  .lang__full{ display:none }
  .lang__abbr{ display:inline }
}

/* ECI advisories require synthetic campaign imagery to be labelled */
.foot__ai{ margin-top:.35rem !important; font-size:.82rem; color:color-mix(in oklab, var(--paper) 52%, transparent) }

/* clip-path needs a real box to clip; these opt out of picture{display:contents} */
[data-reveal]{ display:block }