/* SciHi 2026 shared styles.

   TYPE CHANGE, 18 Aug 2026. Small text was set in Space Mono, per §8 of the
   brief, which specifies it for labels, dates and data. It does not hold up:
   monospace has uneven rhythm, a low apparent x-height and wide default
   tracking, so at 12 to 15px it reads as mechanical rather than crisp. Small
   text is now Inter, which was drawn for interface sizes. Space Grotesk stays
   for display, Fraunces italic stays for the pull quote. Space Mono is kept for
   the altitude readout alone, where a fixed-width figure is genuinely wanted.
   This is a deliberate deviation from §8 and should be confirmed. */

:root{
  --ember:#ff8a4d; --ember-2:#ffb454; --ice:#bcd8ff;
  --paper:#f4f6ff; --haze:#9aa6c9; --void:#03060f;
  --panel: rgba(244,246,255,.05);
  --line:  rgba(244,246,255,.12);
  /* Sized in rem, not ch. The ch unit resolves against the ELEMENT's font, so
     when body copy moved from Space Grotesk to Inter this silently narrowed from
     510px to 499px. "for the Planet" needs 500px at the desktop h1 size, so a
     one pixel shortfall broke the headline onto a fourth line and pushed the
     whole hero down. rem is font-independent and cannot drift like that. */
  --col: min(34rem, 44vw);
  --nav-h: 4.6rem;
  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --ui:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--paper);
     font-family:var(--ui);
     font-size:1.075rem; line-height:1.65;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

a{color:inherit}
img{max-width:100%;height:auto;display:block}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display)}
h1{font-size:clamp(2.9rem,6.2vw,5rem);line-height:1.0;margin:0 0 1.5rem;
   letter-spacing:-.03em;font-weight:700}
h2{font-size:clamp(2rem,3.8vw,3rem);line-height:1.07;margin:0 0 1.1rem;
   letter-spacing:-.025em;font-weight:600}
h3{font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.2;margin:0 0 .7rem;
   letter-spacing:-.015em;font-weight:600}
p{margin:0 0 1.1rem}
.lead{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.55;color:var(--paper);
      letter-spacing:-.011em;max-width:56ch}
.body,p.body{color:var(--haze);font-size:1.05rem;line-height:1.7;max-width:62ch;
      letter-spacing:-.006em}
.quote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
       font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.4;color:var(--ice);
       margin:0 0 2.2rem;max-width:26ch}
.tag{color:var(--ice)}

/* Labels. Inter at 600 with modest tracking reads far cleaner than monospace
   at this size, and keeps the technical tone. */
.kicker{font-family:var(--ui);font-weight:600;
        font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
        color:var(--ember-2);margin:0 0 1.4rem;
        display:flex;align-items:center;gap:.85rem}
.kicker::after{content:'';flex:1;height:1px;
               background:linear-gradient(90deg,currentColor,transparent);opacity:.45}
.label{font-family:var(--ui);font-weight:600;font-size:.75rem;
       letter-spacing:.13em;text-transform:uppercase;color:var(--haze)}
.mono{font-family:'Space Mono',ui-monospace,monospace;letter-spacing:.06em}

/* ---------- prize banner ---------- */
.prize{display:inline-flex;align-items:center;gap:.6rem;
       padding:.68rem 1.25rem;border-radius:999px;margin:0 0 2.1rem;
       background:linear-gradient(180deg,rgba(255,138,77,.17),rgba(255,138,77,.07));
       border:1px solid rgba(255,138,77,.4);
       backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
       font-family:var(--ui);font-weight:500;
       font-size:.92rem;letter-spacing:.005em;color:var(--ember-2);
       max-width:100%}
/* One flex item, so the sentence wraps as a sentence. As separate items the
   value broke mid-phrase, giving "Prizes worth Rs 1 / lakh". */
.prize .prizetext{white-space:nowrap}
.prize b{color:var(--paper);font-weight:600}
.prize .star{color:var(--ember)}
.proposed{font-family:var(--ui);font-size:.82rem;letter-spacing:.01em;
          color:var(--haze);opacity:.8;margin:.6rem 0 0}

/* ---------- glass top bar ---------- */
#nav{position:fixed;top:clamp(12px,1.5vw,22px);left:50%;
     transform:translateX(-50%);z-index:60;
     display:flex;align-items:center;gap:.35rem;
     padding:.45rem .45rem .45rem 1.25rem;border-radius:999px;
     background:linear-gradient(180deg,rgba(244,246,255,.10),rgba(244,246,255,.04));
     backdrop-filter:blur(24px) saturate(170%);
     -webkit-backdrop-filter:blur(24px) saturate(170%);
     border:1px solid rgba(244,246,255,.14);
     box-shadow:0 14px 40px rgba(3,6,15,.5),
                inset 0 1px 0 rgba(255,255,255,.2),
                inset 0 -1px 0 rgba(3,6,15,.3);
     max-width:calc(100vw - 2rem);
     transition:box-shadow .4s var(--ease), background .4s var(--ease)}
#nav .brand{font-family:var(--display);font-weight:700;font-size:1.28rem;
            letter-spacing:-.02em;color:var(--paper);margin-right:.75rem;
            white-space:nowrap;text-decoration:none}
#nav .brand span{color:var(--ember-2);font-weight:600;font-family:var(--ui);
                 font-size:.85rem;margin-left:.4rem;letter-spacing:.04em}
#nav .links{display:flex;align-items:center;gap:.1rem}
#nav a.link{font-family:var(--ui);font-weight:500;font-size:.85rem;
            letter-spacing:.07em;text-transform:uppercase;
            color:var(--haze);text-decoration:none;
            padding:.6rem .8rem;border-radius:999px;white-space:nowrap;
            transition:color .25s var(--ease),background .25s var(--ease)}
#nav a.link:hover{color:var(--paper);background:rgba(244,246,255,.08)}
#nav a.link[aria-current="page"]{color:var(--paper);background:rgba(244,246,255,.12)}
#nav a.navcta{font-family:var(--ui);font-weight:600;font-size:.85rem;
            letter-spacing:.07em;text-transform:uppercase;
            text-decoration:none;white-space:nowrap;
            padding:.66rem 1.15rem;border-radius:999px;margin-left:.35rem;
            color:#1a0d06;background:linear-gradient(180deg,#ffc86f,var(--ember));
            box-shadow:0 2px 14px rgba(255,138,77,.4),
                       inset 0 1px 0 rgba(255,255,255,.5);
            transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
#nav a.navcta:hover{transform:translateY(-1px);
            box-shadow:0 6px 20px rgba(255,138,77,.5),
                       inset 0 1px 0 rgba(255,255,255,.5)}
#navtoggle{display:none;background:none;border:0;cursor:pointer;
           padding:.6rem .7rem;border-radius:999px;color:var(--paper)}

/* ---------- buttons ---------- */
.cta{display:inline-block;padding:.95rem 1.9rem;border-radius:999px;
     text-decoration:none;font-family:var(--ui);font-weight:600;
     font-size:.88rem;letter-spacing:.07em;text-transform:uppercase;
     color:#1a0d06;background:linear-gradient(180deg,#ffc86f,var(--ember));
     box-shadow:0 4px 20px rgba(255,138,77,.32),
                inset 0 1px 0 rgba(255,255,255,.5);
     transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cta:hover{transform:translateY(-2px);
     box-shadow:0 10px 30px rgba(255,138,77,.42),
                inset 0 1px 0 rgba(255,255,255,.5)}
.cta.ghost{background:none;color:var(--ember-2);
           border:1px solid rgba(255,138,77,.45);box-shadow:none;
           backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cta.ghost:hover{background:rgba(255,138,77,.09);box-shadow:none}

/* ---------- layout ---------- */
.wrap{max-width:78rem;margin:0 auto;padding-inline:clamp(1.25rem,5vw,4rem)}
.page{padding-top:calc(var(--nav-h) + clamp(3rem,7vw,6rem));
      padding-bottom:clamp(4rem,10vw,8rem)}
.section{padding-block:clamp(3rem,7vw,6rem);border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}

.grid{display:grid;gap:clamp(1.1rem,2.2vw,1.75rem)}
.g2{grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}

/* Glass panels. Same recipe as the nav so the whole surface feels of a piece:
   a light top-to-bottom wash, a real blur, a hairline border, and an inner top
   highlight that reads as the lit edge of a pane. */
.panel{background:linear-gradient(180deg,rgba(244,246,255,.065),rgba(244,246,255,.028));
       border:1px solid var(--line);border-radius:20px;
       padding:clamp(1.3rem,2.4vw,1.9rem);
       backdrop-filter:blur(16px) saturate(140%);
       -webkit-backdrop-filter:blur(16px) saturate(140%);
       box-shadow:0 8px 30px rgba(3,6,15,.3),
                  inset 0 1px 0 rgba(255,255,255,.09);
       transition:transform .45s var(--ease),border-color .45s var(--ease),
                  box-shadow .45s var(--ease)}
.panel:hover{transform:translateY(-3px);border-color:rgba(244,246,255,.2);
       box-shadow:0 16px 44px rgba(3,6,15,.42),
                  inset 0 1px 0 rgba(255,255,255,.13)}

.meta{display:flex;gap:2.4rem;flex-wrap:wrap;font-family:var(--ui);
      font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
      font-weight:600;color:var(--haze)}
.meta b{display:block;color:var(--paper);font-weight:500;margin-top:.4rem;
        font-size:1.02rem;letter-spacing:0;text-transform:none}

.factline{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem;
          font-family:var(--ui);font-size:.98rem;font-weight:500;
          color:var(--haze);margin:0}
.factline b{font-weight:600;color:var(--paper)}
.factline i{font-style:normal;color:var(--ember);opacity:.65}

/* ---------- key dates ----------
   A compact definition list. The old DATE/VENUE .meta pair sat on one line and
   could not carry three entries without wrapping badly. */
.dates{margin-top:2.2rem}
.dates ul{list-style:none;margin:.9rem 0 0;padding:0;
          display:grid;gap:.55rem}
.dates li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;
          padding-bottom:.55rem;border-bottom:1px solid var(--line)}
.dates li:last-child{border-bottom:0;padding-bottom:0}
.dates b{font-weight:600;color:var(--paper);font-size:1rem;
         min-width:12.5rem;letter-spacing:-.005em}
.dates span{color:var(--haze);font-size:.94rem}

/* ---------- avatars ----------
   §10 forbids placeholder faces. When no photograph exists the slot shows a
   monogram, which is a typographic mark and not a stand-in person. */
.avatar{width:4.5rem;height:4.5rem;border-radius:50%;flex:0 0 auto;
        display:grid;place-items:center;overflow:hidden;
        background:linear-gradient(160deg,rgba(255,138,77,.22),rgba(188,216,255,.1));
        border:1px solid rgba(244,246,255,.16);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
        font-family:var(--display);font-weight:600;font-size:1.15rem;
        color:var(--ember-2);letter-spacing:.02em}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar.lg{width:6rem;height:6rem;font-size:1.5rem}
.personhead{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.personhead h3{font-size:1.18rem;line-height:1.25;text-wrap:balance}
.personhead h3{margin:0}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:38rem;font-size:1rem}
th,td{text-align:left;padding:1rem;border-bottom:1px solid var(--line);
      vertical-align:middle}
th{font-family:var(--ui);font-weight:600;font-size:.74rem;letter-spacing:.13em;
   text-transform:uppercase;color:var(--ember-2);white-space:nowrap}
td .sub{color:var(--haze);font-size:.94rem}
.badge{display:inline-block;font-family:var(--ui);font-weight:600;
       font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
       padding:.28rem .65rem;border-radius:999px;
       border:1px solid var(--line);color:var(--haze);white-space:nowrap}
.badge.pending{border-color:rgba(255,180,84,.42);color:var(--ember-2);
       background:rgba(255,180,84,.07)}

/* ---------- partner logos ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;
       gap:clamp(1.1rem,2.6vw,2.2rem);margin-top:1.8rem}
.logos .slot{display:flex;align-items:center;gap:.7rem;font-family:var(--ui);
             font-size:.82rem;font-weight:500;letter-spacing:.03em;
             color:var(--haze)}
/* Square marks like ISRO look small next to wide wordmarks at a shared height,
   so the cap is generous. opacity is just under 1 so the logos sit back from
   the copy rather than competing with it. */
.logos img{height:clamp(2.1rem,3.4vw,2.9rem);width:auto;max-width:11rem;
           object-fit:contain;
           filter:brightness(0) invert(1);opacity:.85}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,4rem);
       color:var(--haze);font-size:.98rem;position:relative;z-index:2;
       background:rgba(3,6,15,.72);
       backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
footer a{color:var(--haze)}
.fineprint{font-family:var(--ui);font-size:.82rem;letter-spacing:.01em;
           line-height:1.85;color:var(--haze);opacity:.8}

/* ---------- reveal on scroll ----------
   Deliberately small: 14px and a fade. Anything larger reads as a slideshow
   rather than as the page settling. */
.reveal{opacity:0;transform:translateY(14px);
        transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}
.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--col:100%}
  #nav{left:1rem;right:1rem;transform:none;max-width:none;
       padding:.45rem .45rem .45rem 1.1rem}
  /* The dropdown is fully opaque on purpose. It was translucent at .90/.94 with
     a blur, which let the 3D scene move behind the menu items while you were
     trying to read them. A navigation overlay is not decoration: it should be a
     solid surface you can scan. No backdrop-filter here either, since it is
     wasted work behind an opaque fill. */
  #nav .links{display:none;position:absolute;top:calc(100% + .55rem);left:0;right:0;
       flex-direction:column;align-items:stretch;gap:.15rem;padding:.5rem;
       border-radius:22px;
       background:#0a0e1a;
       border:1px solid rgba(244,246,255,.16);
       box-shadow:0 24px 56px rgba(0,0,0,.75),
                  inset 0 1px 0 rgba(255,255,255,.07)}
  #nav.open .links{display:flex}
  #nav a.link{padding:.95rem 1.1rem;font-size:.95rem}
  #navtoggle{display:block;margin-left:auto}
  table{min-width:32rem}
}
@media (max-width:600px){
  .prize{font-size:.86rem;line-height:1.45;align-items:flex-start;
         padding:.62rem 1.05rem}
  .prize .prizetext{white-space:normal}
  .prize .star{margin-top:.15rem}
}
@media (max-width:520px){
  body{font-size:1.02rem}
  #nav .brand{font-size:1.1rem}
  #nav a.navcta{padding:.6rem .85rem;font-size:.78rem}
  .meta{gap:1.4rem}
  .avatar{width:3.6rem;height:3.6rem;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}