/* ============================================================
   Speech Matters India — shared styles
   Design system: Newsreader (serif headings) + Hanken Grotesk (body/UI)
   Palette: warm off-white #F6F2EA · near-black #1C1916 · crimson #9E1B30
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#F6F2EA;
  color:#1C1916;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:#9E1B30;color:#F6F2EA}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* ---- form fields ---- */
input,select,textarea{font-family:'Hanken Grotesk',sans-serif}
input:focus,select:focus,textarea:focus{outline:none;border-color:#9E1B30}

/* ============================================================
   Image placeholder slots (drop-in: replace with <img> later)
   ============================================================ */
.img-slot{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px;
  background:repeating-linear-gradient(45deg,#EDE5D7,#EDE5D7 11px,#E6DDCC 11px,#E6DDCC 22px);
  border:1px solid #DCD0BC;
  color:#8A8073;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  line-height:1.4;
  letter-spacing:0.02em;
  overflow:hidden;
}
.img-slot img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ============================================================
   Responsive navigation
   Desktop nav >= 900px · hamburger + drop menu < 900px
   ============================================================ */
.nav-desktop{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px)}
.nav-toggle{display:none}
.mobile-menu{display:none}

@media (max-width:899px){
  .nav-desktop{display:none}
  .nav-toggle{display:flex}
  .mobile-menu.open{display:flex}
}

/* ============================================================
   Hover interactions (replacing prototype style-hover)
   ============================================================ */
.navlink{transition:color .15s}
.navlink:hover{color:#9E1B30}

.btn-crimson{transition:background .15s}
.btn-crimson:hover{background:#841526}

.btn-cream{transition:background .15s}
.btn-cream:hover{background:#fff}

.btn-outline{transition:border-color .15s}
.btn-outline:hover{border-color:#1C1916}

.btn-outline-cream{transition:border-color .15s}
.btn-outline-cream:hover{border-color:#FBF1E4}

.btn-tedx{transition:border-color .15s,gap .15s}
.btn-tedx:hover{border-color:#1C1916;gap:13px}

.gap-grow{transition:gap .15s}
.gap-grow:hover{gap:12px}

.lift{transition:transform .15s}
.lift:hover{transform:translateY(-2px)}

.footlink{transition:color .15s}
.footlink:hover{color:#F1EADC}