/* ==========================================================================
   Bharatiya Merit Party — site.css
   Vanilla CSS. No framework, no build step.
   Structure: tokens → reset → type → layout → components → sections → motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   BMP's palette is deliberately NOT the RHA red. Deep indigo carries the
   institutional / constitutional weight the party argues from; marigold is
   the warm Indian accent that keeps it from reading corporate.
   -------------------------------------------------------------------------- */
:root {
  --ink:        #111111;
  --ink-soft:   #1a1a1a;   /* card background on ink sections */
  --paper:      #f4f1ea;   /* default page bg — warm cream, never plain white */
  --paper-deep: #e9e2d6;   /* second cream, for the legal section */
  --indigo:     #16305c;   /* primary brand */
  --indigo-lit: #24497f;   /* hover / lighter fill */
  --marigold:   #e5822a;   /* primary accent — CTAs */
  --gold:       #f2b544;   /* tint for eyebrows on dark grounds */

  /* hero.png (8.7 MB) is the source file — never reference it directly.
     hero.webp is 278 KB at the same on-screen quality. See assets/img/README.md */
  --hero-photo: url('../img/hero.webp');

  --wrap: 1400px;
  --pad-x: 1.25rem;
  --pad-y: 6rem;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 1024px) {
  :root { --pad-x: 2.5rem; --pad-y: 9rem; }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--marigold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Typography
   Large headings are tightly tracked; body copy is never tracked.
   -------------------------------------------------------------------------- */
.display {
  font-family: "Space Grotesk", "Noto Sans Devanagari", system-ui, sans-serif;
  font-weight: 700;
  margin: 0;
}

.h-hero  { font-size: clamp(3.1rem, 10.5vw, 8.8rem); line-height: .84; letter-spacing: -.055em; }
.h-major { font-size: clamp(2.4rem, 7vw, 6rem);      line-height: .93; letter-spacing: -.045em; }
.h-sect  { font-size: clamp(2rem, 5vw, 4.5rem);      line-height: .97; letter-spacing: -.04em; }
.h-card  { font-size: clamp(1.35rem, 2vw, 1.75rem);  line-height: 1.12; letter-spacing: -.02em; }

/* Tracking is a large-type device only — see CLAUDE.md */
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  max-width: 40ch;
  margin: 0;
}

.eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 1.75rem;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--marigold { color: var(--marigold); }

.badge {
  display: inline-flex; align-items: center; gap: .75rem;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  border-radius: 999px;              /* the ONLY radius in the system */
  padding: .5rem 1rem;
  font-size: .625rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
@media (min-width: 768px) { .badge { font-size: .75rem; } }

.badge .dot {
  width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--marigold); flex: none;
}

.outline-text {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.28);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.section { padding: var(--pad-y) var(--pad-x); }
.wrap    { max-width: var(--wrap); margin-inline: auto; }

.bg-ink    { background: var(--ink);        color: #fff; }
.bg-indigo { background: var(--indigo);     color: #fff; }
.bg-white  { background: #fff; }
.bg-deep   { background: var(--paper-deep); }

.grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .split   { grid-template-columns: .7fr 1.3fr; gap: 0; } }

.stack-lg { display: grid; gap: 3rem; }
.mt-2 { margin-top: .5rem; }  .mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }   .mt-12 { margin-top: 3rem; }

/* --------------------------------------------------------------------------
   5. Texture
   -------------------------------------------------------------------------- */
.grain {
  position: absolute; inset: 0; opacity: .08; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* --------------------------------------------------------------------------
   6. Header
   Absolute over the hero, not fixed — the hero owns the top of the page.
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .875rem var(--pad-x);
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.15);
  color: #fff;
}

.brand { display: flex; align-items: center; gap: .75rem; margin-right: auto; }
.brand__mark { width: 44px; height: 44px; flex: none; }
.brand__name {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700; font-size: 1.05rem; letter-spacing: .16em; line-height: 1;
}
.brand__tag {
  font-size: .625rem; letter-spacing: .1em; color: rgba(255,255,255,.62);
  margin-top: .3rem;
  white-space: nowrap;
}
/* Below 480px there is not enough room beside the language toggle and the menu
   button — the tagline wraps and doubles the header height. Drop it. */
@media (max-width: 479px) { .brand__tag { display: none; } }

.nav { display: none; gap: 1.75rem; font-size: .875rem; }
.nav a { color: rgba(255,255,255,.78); transition: color .2s var(--ease); }
.nav a:hover { color: #fff; }
@media (min-width: 1100px) { .nav { display: flex; } }

.header__actions { display: flex; align-items: center; gap: .5rem; }

.lang {
  display: flex; align-items: center;
  border: 1px solid rgba(255,255,255,.25);
}
.lang button {
  padding: .55rem .7rem; font-size: .7rem; font-weight: 700;
  color: rgba(255,255,255,.6);
}
.lang button[aria-pressed="true"] { background: #fff; color: var(--ink); }

/* Mobile menu */
.menu-toggle { display: flex; flex-direction: column; gap: 4px; padding: .6rem; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: #fff; }
@media (min-width: 1100px) { .menu-toggle { display: none; } }

.mobile-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(0,0,0,.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding: 1rem var(--pad-x) 1.5rem;
}
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
}
.mobile-menu a {
  display: flex; align-items: center; min-height: 2.75rem;
  border: 1px solid rgba(255,255,255,.1);
  padding: .5rem .75rem; font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,.75);
}
.mobile-menu a:hover { border-color: var(--marigold); color: #fff; }

/* --------------------------------------------------------------------------
   7. Buttons — sharp rectangles, no radius
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem 1.6rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;   /* labels must never wrap — a 3-line button is not a button */
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--sm { padding: .7rem 1.1rem; gap: .75rem; font-size: .7rem; }

/* Below 640px the header carries the brand, the language toggle and the menu
   button; a fourth item squeezes the CTA to an unreadable width. The hero CTA
   and the mobile menu both cover joining, so drop it here. */
.header__actions .btn { display: none; }
@media (min-width: 640px) { .header__actions .btn { display: inline-flex; } }

.btn--primary { background: var(--marigold); color: #111; }
.btn--primary:hover { background: #fff; color: #111; }

.btn--indigo { background: var(--indigo); color: #fff; }
.btn--indigo:hover { background: var(--indigo-lit); }

.btn--ghost-light { border: 1px solid rgba(255,255,255,.3); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: #111; }

.btn--ghost-dark { border: 1px solid rgba(17,17,17,.25); color: var(--ink); }
.btn--ghost-dark:hover { background: var(--ink); color: #fff; }

/* --------------------------------------------------------------------------
   8. Hero
   No photography yet — the ground is an indigo gradient plus grain and grid.
   Set --hero-photo on :root to layer a real image behind it.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 46rem;
  display: flex; align-items: center;
  padding: 9rem var(--pad-x) 5rem;
  color: #fff;
  overflow: hidden;
  /* Fallback ground. Visible if the photo is missing or still loading, so the
     hero is never a bare white box. */
  background-color: #0b1a33;
  background-image: linear-gradient(140deg, #16305c 0%, #0b1a33 60%, #111 100%);
}

@media (min-width: 900px) { .hero { min-height: 54rem; } }

/* Photograph, on its own layer so it can be filtered without touching the
   scrim gradients or the text above them. Slightly desaturated and cooled
   so the marigold CTA stays the brightest thing in the frame. */
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-photo);
  background-size: cover;
  background-position: 72% center;
  filter: saturate(.85) contrast(1.04) brightness(.97);
}

/* Scrim. Horizontal wipe: near-solid under the headline, clearing toward the
   right so faces stay readable. Second layer anchors the CTA row; third is a
   faint marigold bloom tying the photo to the palette. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    /* Tuned to the actual photo. "One standard." runs to ~62% of the width at
       desktop sizes, and the placard sits at 34–51% — directly behind it. The
       scrim therefore stays heavy out to ~52%, which pushes the placard down
       into texture instead of a second competing headline, then clears fast so
       the group on the right keeps its faces. */
    linear-gradient(90deg,
      rgba(8,17,33,.96) 0%,
      rgba(8,17,33,.92) 34%,
      rgba(8,17,33,.74) 52%,
      rgba(8,17,33,.42) 72%,
      rgba(8,17,33,.28) 88%,
      rgba(8,17,33,.38) 100%),
    linear-gradient(0deg, rgba(8,17,33,.82) 0%, rgba(8,17,33,0) 44%),
    radial-gradient(115% 85% at 78% 36%, rgba(229,130,42,.28) 0%, rgba(229,130,42,0) 62%);
}

.hero .grain { z-index: 2; }
.hero__inner { position: relative; z-index: 3; width: 100%; }

/* Type sits on a photograph, so it gets a soft halo rather than relying on
   the scrim alone — cheap insurance against a lighter crop. */
.hero .h-hero,
.hero .h-major { text-shadow: 0 3px 38px rgba(8,17,33,.8), 0 1px 4px rgba(8,17,33,.4); }
.hero__lead,
.hero .badge { text-shadow: 0 2px 26px rgba(8,17,33,.65); }

/* The outline button loses definition over a busy photo; blur what is behind it. */
.hero .btn--ghost-light {
  background: rgba(8,17,33,.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn--ghost-light:hover { background: #fff; color: #111; }

/* Portrait screens: the headline stacks over the photo instead of beside it,
   so the wipe rotates to bottom-up and the crop shifts to keep faces in frame. */
@media (max-width: 768px) {
  /* A 1.79:1 photo on a portrait viewport crops to a narrow vertical slice,
     so mobile gets its own squarer crop centred on the group. */
  :root { --hero-photo: url('../img/hero-mobile.webp'); }
  /* Faces sit in the top quarter of the mobile crop; anything higher than this
     tucks them behind the header. */
  .hero__media { background-position: 50% 22%; }
  .hero__scrim {
    background-image:
      linear-gradient(0deg,
        rgba(8,17,33,.97) 0%,
        rgba(8,17,33,.90) 40%,
        rgba(8,17,33,.52) 74%,
        rgba(8,17,33,.62) 100%),
      radial-gradient(120% 55% at 50% 18%, rgba(229,130,42,.20) 0%, rgba(229,130,42,0) 70%);
  }
}

.hero .h-hero { margin-top: 1.75rem; }
.hero__line2 { color: var(--marigold); display: block; }

.hero__lead { margin-top: 2rem; color: rgba(255,255,255,.85); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.75rem; }
.hero__cta .btn { min-width: 15rem; }

/* Vertical rail, right edge — desktop only */
.hero__rail {
  position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: .65rem; letter-spacing: .5em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
  display: none;
}
@media (min-width: 1200px) { .hero__rail { display: block; } }

/* --------------------------------------------------------------------------
   9. Ticker
   -------------------------------------------------------------------------- */
.ticker {
  background: var(--marigold); color: #111;
  padding: .9rem 0; overflow: hidden;
  border-block: 1px solid rgba(0,0,0,.15);
}
.ticker__track {
  display: flex; width: max-content;
  animation: ticker 30s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span {
  padding-inline: 2rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  min-height: 23rem;
  padding: 2rem;
  display: flex; flex-direction: column;
  background: var(--ink-soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-7px); box-shadow: 0 24px 60px rgba(0,0,0,.28); }

.card--accent { background: var(--marigold); color: #111; }
.card--indigo { background: var(--indigo); }

.card__num {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .18em;
  opacity: .55;
}
.card__body { margin-top: auto; padding-top: 2.5rem; }
.card__body p {
  margin: 1rem 0 0;
  font-size: .95rem; line-height: 1.6;
  opacity: .78;
}
.card--accent .card__body p { opacity: .85; }

/* --------------------------------------------------------------------------
   11. Roadmap
   -------------------------------------------------------------------------- */
.step {
  display: grid; gap: 1rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(17,17,17,.16);
}
@media (min-width: 900px) {
  .step { grid-template-columns: 6rem 1fr 1.2fr; gap: 3rem; align-items: start; }
}
.step__num {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 2.5rem; font-weight: 700; line-height: 1;
  letter-spacing: -.04em; color: var(--marigold);
}
.step h3 { margin: 0; font-size: 1.4rem; letter-spacing: -.02em; }
.step p  { margin: 0; opacity: .72; font-size: .95rem; }

/* --------------------------------------------------------------------------
   12. Legal / know-the-law
   -------------------------------------------------------------------------- */
.law-item {
  padding: 1.75rem 0;
  border-top: 1px solid rgba(17,17,17,.16);
}
.law-item h3 {
  margin: 0 0 .5rem;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.15rem; letter-spacing: -.01em;
}
.law-item p { margin: 0; font-size: .95rem; opacity: .75; }
.law-item .ref {
  display: inline-block; margin-bottom: .75rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--indigo);
}

/* --------------------------------------------------------------------------
   13. FAQ — native details/summary, no JS
   -------------------------------------------------------------------------- */
.faq details { border-bottom: 1px solid rgba(17,17,17,.2); }
.faq summary {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.6rem 0;
  cursor: pointer; list-style: none;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q-num {
  font-size: .75rem; letter-spacing: .16em; opacity: .45; flex: none;
}
.faq .plus {
  margin-left: auto; flex: none;
  width: 1.5rem; height: 1.5rem; position: relative;
  transition: transform .3s var(--ease);
}
.faq .plus::before, .faq .plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--ink);
}
.faq .plus::before { width: 100%; height: 2px; }
.faq .plus::after  { width: 2px; height: 100%; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details p {
  margin: 0 0 1.75rem;
  max-width: 62ch; font-size: .98rem; opacity: .78;
}

/* --------------------------------------------------------------------------
   14. Form
   -------------------------------------------------------------------------- */
.field { display: block; margin-bottom: 1rem; }
.field > span {
  display: block; margin-bottom: .5rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; opacity: .65;
}
.field input, .field select {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(17,17,17,.2);
  padding: 1rem;
  font: inherit; font-size: .95rem;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus {
  border-color: var(--marigold);
  box-shadow: 0 0 0 1px var(--marigold);
}
.field input[aria-invalid="true"] { border-color: #c62828; }
.field .err {
  display: block; margin-top: .4rem;
  font-size: .75rem; color: #c62828; font-weight: 600;
}

/* Honeypot — must stay visually hidden but not display:none */
.hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.form-note { font-size: .8rem; opacity: .6; margin-top: 1rem; max-width: 46ch; }

.form-status { margin-top: 1.25rem; font-size: .9rem; font-weight: 600; }
.form-status[data-state="ok"]  { color: #1b5e20; }
.form-status[data-state="err"] { color: #c62828; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: #000; color: #fff;
  padding: 4rem var(--pad-x) 1.75rem;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer h4 {
  margin: 0 0 1.25rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a:hover { color: var(--marigold); }
.site-footer li, .site-footer p { font-size: .9rem; color: rgba(255,255,255,.72); }

.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .75rem; color: rgba(255,255,255,.45);
}

/* --------------------------------------------------------------------------
   16. Motion
   -------------------------------------------------------------------------- */
/* Scoped to .js so the page is fully readable when JavaScript never arrives.
   The class is set by an inline script in <head>, and removed again by a
   failsafe timer if site.js fails to run — otherwise a blocked or broken
   script leaves the entire page invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}