/* ============================================================================
   Vedic Chess — editorial light
   ----------------------------------------------------------------------------
   The previous design was charcoal with a checkerboard texture and gold serif
   type. Handsome, but it read as classic-premium and it fought the photographs.
   These are candid pictures from real tournaments — a medal being placed, a
   five-year-old meeting the Chief Minister — and they need a quiet ground with
   room around them, not a patterned dark one competing for attention.

   So: warm off-white paper, near-black text, one muted gold carried over from
   the logo, and a single tight grotesk doing nearly all the work. The only
   flourish is an italic serif used one phrase at a time, which is what keeps a
   minimal page from reading as an unfinished one.
   ========================================================================= */

:root{
  --paper:#fbfaf8;
  --paper-2:#f4f1ec;
  --ink:#15171a;
  --ink-soft:#3a3d42;
  --muted:#736d64;
  --line:#e7e2da;
  --line-soft:#f0ece5;
  --gold:#9c7734;           /* the logo's gold, darkened to hold on a light ground */
  --gold-soft:#f5eeddcc;
  --green:#1f6b4a;
  --maxw:1200px;
  --r:4px;                  /* corners are hinted, not rounded away */
  --r-lg:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-accent:'Instrument Serif',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* The header is sticky, so a section jumped to from the menu scrolls to the very
   top of the window and lands *underneath* it. On a phone the Gallery heading
   ended up 8px below the top of a 73px header — invisible. The other sections
   only escaped because their own padding happened to be deep enough, which is
   luck rather than a layout. This holds every jump target clear of the header,
   with room to breathe above it. */
section[id]{scroll-margin-top:92px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.03em;font-weight:600}
p{margin:0 0 1em}
.container{width:min(100% - 40px,var(--maxw));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ───────────────────────────────────────────────────────────────── */
/* clamp() rather than breakpoints: the headline should be as large as the
   viewport allows at every width, not in three jumps. */
.display{font-size:clamp(2.7rem,7.4vw,6.2rem);letter-spacing:-.045em;font-weight:600}
.h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
.h3{font-size:1.12rem;font-weight:600}
.accent{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:-.01em}
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.lead{font-size:1.08rem;color:var(--ink-soft);max-width:64ch}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;
  font-size:.94rem;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:#000}
.btn--line{border-color:var(--line);color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}
.btn--wa{background:var(--green);color:#fff}
.btn--wa:hover{background:#18563b}
.ico{width:17px;height:17px;fill:currentColor;flex:none}

/* ── header ─────────────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(251,250,248,.88);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.site-header.scrolled{border-bottom-color:var(--line)}
.header__inner{display:flex;align-items:center;gap:24px;height:72px}
.logo{display:flex;align-items:baseline;gap:9px;text-decoration:none;margin-right:auto}
.logo__mark{font-size:1.25rem;color:var(--gold);line-height:1}
.logo__text{font-weight:600;letter-spacing:-.02em;font-size:1.05rem}
.logo__text span{color:var(--muted);font-weight:500}
.nav{display:flex;gap:24px}
.nav a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--ink-soft);padding:6px 0;position:relative}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);
  transition:width .25s var(--ease);
}
.nav a:hover::after{width:100%}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{width:20px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .2s}
.nav-toggle.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding:clamp(40px,5.5vw,68px) 0 clamp(40px,6vw,72px)}
.hero__inner{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,5vw,68px);align-items:center;
}
.hero__title{margin-bottom:20px}
/* Each word is masked by its own line and slides up from behind it, so the
   headline reads as type setting itself rather than as something fading in. */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.w > span{display:inline-block;transform:translateY(108%);opacity:0}
.hero.is-in .w > span{transform:translateY(0);opacity:1;transition:transform .9s var(--ease),opacity .5s ease}
.hero.is-in .w:nth-of-type(1) > span{transition-delay:.06s}
.hero.is-in .w:nth-of-type(2) > span{transition-delay:.15s}
.hero.is-in .w:nth-of-type(3) > span{transition-delay:.24s}
.hero__sub,.hero__cta,.hero__meta{opacity:0;transform:translateY(14px)}
.hero.is-in .hero__sub{opacity:1;transform:none;transition:opacity .7s ease .34s,transform .7s var(--ease) .34s}
.hero.is-in .hero__cta{opacity:1;transform:none;transition:opacity .7s ease .42s,transform .7s var(--ease) .42s}
.hero.is-in .hero__meta{opacity:1;transform:none;transition:opacity .7s ease .5s,transform .7s var(--ease) .5s}
.hero__sub{font-size:1.1rem;color:var(--ink-soft);max-width:47ch;margin-bottom:28px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.hero__meta{display:flex;gap:30px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.hero__meta strong{display:block;font-size:1.4rem;letter-spacing:-.03em}
.hero__meta span{font-size:.8rem;color:var(--muted)}

.hero__figure{position:relative;margin:0;opacity:0;transform:scale(1.05)}
.hero.is-in .hero__figure{opacity:1;transform:none;transition:opacity 1s ease .18s,transform 1.5s var(--ease) .18s}
/* 3/4 rather than 4/5: at 4/5 the photograph was tall enough to push the
   headline below the fold on a laptop, and the headline is the point. The crop
   favours the upper-middle of the frame, where the faces are — centred, it gave
   the banner more room than the medal. */
.hero__figure img{
  width:100%;height:auto;aspect-ratio:3/4;max-height:min(62vh,540px);object-fit:cover;object-position:center 38%;
  border-radius:var(--r-lg);background:var(--paper-2);
}
.hero__cap{margin-top:12px;font-size:.82rem;color:var(--muted);display:flex;gap:9px;align-items:baseline}
.hero__cap::before{content:"";width:18px;height:1px;background:var(--gold);flex:none;transform:translateY(-4px)}

/* ── sections ───────────────────────────────────────────────────────────── */
.section{padding:clamp(60px,7.5vw,104px) 0}
.section--tint{background:var(--paper-2)}
.section--line{border-top:1px solid var(--line)}
.section__head{max-width:70ch;margin-bottom:clamp(32px,4vw,52px)}
.section__head .h2{margin-bottom:14px}

/* ── gallery, directly under the hero ───────────────────────────────────── */
/* Columns rather than a fixed grid: these are portrait and landscape straight
   off a phone, and one aspect ratio would crop faces out of the group shots. */
.gallery__grid{columns:3;column-gap:14px}
.gtile{
  margin:0 0 14px;break-inside:avoid;position:relative;overflow:hidden;
  border-radius:var(--r-lg);background:var(--paper-2);cursor:zoom-in;
  border:0;padding:0;width:100%;display:block;font:inherit;text-align:left;
}
.gtile img{width:100%;height:auto;transition:transform .6s var(--ease)}
.gtile:hover img,.gtile:focus-visible img{transform:scale(1.03)}
.gtile figcaption{
  position:absolute;inset:auto 0 0 0;padding:30px 14px 13px;
  background:linear-gradient(transparent,rgba(10,11,12,.82));
  color:#fff;font-size:.84rem;font-weight:500;line-height:1.4;letter-spacing:-.01em;
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease);
}
.gtile:hover figcaption,.gtile:focus-visible figcaption{opacity:1;transform:none}
.gallery__note{margin-top:24px;font-size:.9rem;color:var(--muted)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;display:none;background:rgba(12,13,14,.95);padding:26px}
.lb.is-open{display:grid;place-items:center}
.lb__fig{margin:0;display:grid;place-items:center;max-width:100%}
.lb img{max-width:min(94vw,1000px);max-height:82vh;object-fit:contain;border-radius:var(--r)}
.lb__cap{color:#e9e6e1;font-size:.9rem;text-align:center;margin-top:16px;max-width:60ch;line-height:1.5}
.lb__close,.lb__nav{
  position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;cursor:pointer;
  width:46px;height:46px;border-radius:50%;font-size:1.15rem;line-height:1;
  display:grid;place-items:center;transition:background .2s;
}
.lb__close:hover,.lb__nav:hover{background:rgba(255,255,255,.26)}
.lb__close{top:22px;right:22px}
.lb__nav--prev{left:22px;top:50%;transform:translateY(-50%)}
.lb__nav--next{right:22px;top:50%;transform:translateY(-50%)}

/* ── champions ──────────────────────────────────────────────────────────── */
.champions__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.champ{background:var(--paper);padding:30px 24px}
.section--tint .champ{background:var(--paper-2)}
.champ__rank{font-family:var(--font-accent);font-style:italic;color:var(--gold);font-size:1.35rem;margin-bottom:12px}
.champ h3{font-size:1.06rem;margin-bottom:5px}
.champ p{margin:0;font-size:.88rem;color:var(--muted)}

/* ── shared content bits ────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,68px);align-items:start}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.checklist--2{grid-template-columns:1fr 1fr;gap:11px 22px}
.checklist li{position:relative;padding-left:22px;font-size:.95rem;color:var(--ink-soft)}
.checklist li::before{content:"";position:absolute;left:0;top:.65em;width:9px;height:1px;background:var(--gold)}
.panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);background:var(--paper)}
.section--tint .panel{background:var(--paper-2)}
.panel h3{margin-bottom:18px}
.pipeline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;font-size:.85rem;color:var(--muted)}
.pipeline b{font-weight:600;color:var(--ink)}
.pipeline i{font-style:normal;color:var(--gold)}

/* ── founder ────────────────────────────────────────────────────────────── */
.founder__grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,5vw,60px);align-items:start}
/* The source is very nearly square (1227x1282) and it is a studio headshot on
   black. Forced into a 4/5 box at 440px wide it became a 550px column of mostly
   background with a stretched-looking crop. Square, and smaller, so it reads as
   a portrait rather than a billboard. */
.founder__portrait{max-width:330px}
.founder__portrait img{
  /* height:auto matters. The <img> carries height="1282" so the browser can
     reserve space before the file arrives, and that attribute is a
     presentational hint — a DEFINITE height, which aspect-ratio cannot
     override. Without this the portrait rendered 330 wide by 1282 tall. */
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 12%;
  border-radius:var(--r-lg);background:#111;
}
.founder__name{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.founder__name strong{display:block;font-size:1.05rem;letter-spacing:-.02em}
.founder__name span{font-size:.85rem;color:var(--muted)}
.trophies{list-style:none;margin:0;padding:0}
.trophies li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.trophies li:last-child{border-bottom:0}
.trophies .n{font-family:var(--font-accent);font-style:italic;color:var(--gold);font-size:.98rem}
.trophies strong{font-weight:600;font-size:.97rem}
.trophies em{display:block;font-style:normal;font-size:.86rem;color:var(--muted);margin-top:3px}

/* ── centres ────────────────────────────────────────────────────────────── */
.centres{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line)}
.centre{background:var(--paper);padding:26px 22px}
.section--tint .centre{background:var(--paper-2)}
.centre__n{font-family:var(--font-accent);font-style:italic;color:var(--gold);font-size:1.05rem;margin-bottom:9px}
.centre strong{display:block;font-size:.99rem;letter-spacing:-.02em;margin-bottom:3px}
.centre span{font-size:.85rem;color:var(--muted)}

/* ── stats ──────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-bottom:36px}
.stat{background:var(--paper);padding:30px 22px}
.section--tint .stat{background:var(--paper-2)}
.stat strong{display:block;font-size:clamp(1.85rem,3.3vw,2.6rem);letter-spacing:-.04em;margin-bottom:4px}
.stat span{font-size:.84rem;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-size:.84rem;padding:8px 14px;border:1px solid var(--line);border-radius:99px;color:var(--ink-soft);background:var(--paper)}
.section--tint .chip{background:var(--paper-2)}

/* ── feature card ───────────────────────────────────────────────────────── */
.feature{background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:clamp(30px,5vw,60px)}
.feature .eyebrow{color:rgba(251,250,248,.62)}
.feature .h2{margin-bottom:14px}
.feature p{color:rgba(251,250,248,.78);max-width:58ch}
.feature__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:30px 0;padding:24px 0;border-block:1px solid rgba(251,250,248,.18)}
.feature__stats strong{display:block;font-size:1.35rem;letter-spacing:-.03em}
.feature__stats span{font-size:.8rem;color:rgba(251,250,248,.62)}
.feature .btn--solid{background:var(--paper);color:var(--ink)}
.feature .btn--solid:hover{background:#fff}
.feature__note{font-size:.86rem;color:rgba(251,250,248,.55);margin:16px 0 0}

/* ── timeline ───────────────────────────────────────────────────────────── */
.timeline{border-top:1px solid var(--line)}
.tl{display:grid;grid-template-columns:132px 1fr;gap:26px;padding:24px 0;border-bottom:1px solid var(--line)}
.tl__when{font-size:.84rem;color:var(--muted);padding-top:3px}
.tl h3{margin-bottom:6px}
.tl p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* ── coaching ───────────────────────────────────────────────────────────── */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.level{background:var(--paper);padding:32px 26px}
.section--tint .level{background:var(--paper-2)}
.level__tag{font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
.level h3{margin-bottom:10px}
.level p{margin:0;font-size:.93rem;color:var(--ink-soft)}

/* ── contact ────────────────────────────────────────────────────────────── */
.contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:1px;background:var(--line);margin-top:36px}
.ccard{background:var(--paper);padding:26px 22px;text-decoration:none;display:block;transition:background .2s}
.section--tint .ccard{background:var(--paper-2)}
.ccard:hover{background:var(--gold-soft)}
.ccard__k{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:11px;display:block}
.ccard strong{display:block;font-size:1rem;margin-bottom:3px;letter-spacing:-.02em}
.ccard span{font-size:.87rem;color:var(--muted)}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--line);padding:46px 0 32px;font-size:.9rem}
.footer__inner{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;justify-content:space-between}
.footer__brand strong{display:block;font-size:1.05rem;letter-spacing:-.02em}
.footer__brand span{color:var(--muted);font-size:.86rem}
.footer__nav{display:flex;gap:20px;flex-wrap:wrap}
.footer__nav a{text-decoration:none;color:var(--muted)}
.footer__nav a:hover{color:var(--ink)}
.footer__social{display:flex;gap:10px}
.social{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;text-decoration:none;transition:border-color .2s,background .2s}
.social:hover{border-color:var(--ink);background:var(--paper-2)}
.social svg{width:17px;height:17px;fill:var(--ink)}
.footer__legal{width:100%;padding-top:22px;margin-top:6px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:.82rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* The build credit. On its own line rather than as a third item in the row
   above, where it would sit level with the academy's own phone number and read
   as being of equal importance. Present, but the quietest thing on the page. */
.footer__made{width:100%;margin:12px 0 0;color:var(--muted);opacity:.66;font-size:.76rem;letter-spacing:.02em}

/* ── scroll reveal ──────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s var(--ease)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr}
  /* The photograph does NOT come first on a narrow screen. Ordered above the
     text it took 62% of the first screen and pushed the headline off it, so a
     phone opened on a picture with no idea whose site it was. */
  .hero__figure{max-width:520px}
  .hero__figure img{aspect-ratio:5/4;max-height:46vh}
  .split,.founder__grid{grid-template-columns:1fr}
  .champions__grid,.stats{grid-template-columns:1fr 1fr}
  .levels{grid-template-columns:1fr}
  .gallery__grid{columns:2}
  .feature__stats{grid-template-columns:1fr 1fr}
}
/* The header collapses earlier than the rest of the layout, and on its own.
   Logo + six links + the CTA stop fitting at about 800px, but the menu used to
   wait until 700 — so at 768px, the commonest tablet width, "Join community"
   hung 14px off the right edge and the whole page scrolled sideways. The menu
   now folds before the header runs out of room rather than after. */
@media (max-width:860px){
  .nav{
    position:absolute;top:72px;left:0;right:0;background:var(--paper);
    border-block:1px solid var(--line);flex-direction:column;gap:0;
    padding:8px 20px 16px;display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .nav a::after{display:none}
  .nav-toggle{display:flex}
  .header__cta{display:none}
}
@media (max-width:700px){
  body{font-size:16px}
  .checklist--2{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr;gap:5px}
}
@media (max-width:520px){
  .gallery__grid{columns:1}
  .champions__grid,.stats,.feature__stats{grid-template-columns:1fr}
}

/* Motion here is decoration; the page must arrive complete without it. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .w > span,.hero__sub,.hero__cta,.hero__meta,.hero__figure,.reveal{opacity:1!important;transform:none!important}
}