/* ========================================================
   Sumeru India Growth Fund — Design System
   Tokens, typography, nav, footer, and shared components.
   Applies site-wide; page-specific bespoke layout/motion
   (hero illustration, ascent path, counters, etc.) lives in
   home.css / home.js and is added page by page.
   ======================================================== */

:root{
  /* color */
  --navy-955:#130903;
  --navy-950:#160d07;
  --navy-900:#22140a;
  --navy-800:#331f12;
  --navy-700:#4c311e;
  --navy-500:#7d5940;
  --ink:#22140a;
  --ink-soft:#594436;
  --ink-faint:#9c8577;
  --cream:#faf7f1;
  --cream-deep:#f1ead9;
  --paper:#fffdfa;
  /* Sumeru brand accents (from brand guide) */
  --accent:#d25000;
  --accent-deep:#a84200;
  --accent-bright:#fc6900;
  --accent-soft:#ff8842;
  --accent-tint:#ff9a5c;
  --terracotta:#bf6e3f;
  --brown:#854529;
  --espresso:#3c3024;
  --sand:#d8c3a4;
  --sand-light:#f0e6d2;
  --gold:#d0a837;
  --line:rgba(34,20,10,.12);
  --line-soft:rgba(34,20,10,.07);
  --line-dark:rgba(244,241,234,.14);
  --on-dark:#f4f1ea;
  --on-dark-soft:#cfbeab;

  /* type */
  --font:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-s:400ms;
  --dur-m:700ms;
  --dur-l:1100ms;

  /* layout */
  --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
::selection{background:rgba(252,105,0,.2)}

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

.container{max-width:var(--container);margin:0 auto;padding:0 32px}
@media(max-width:680px){.container{padding:0 22px}}

/* ---------- typography ---------- */
h1{font-size:clamp(2.3rem,1.9rem + 2.2vw,3.4rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 20px;font-weight:600;color:var(--ink);text-wrap:balance}
h2{font-size:clamp(1.6rem,1.35rem + 1.3vw,2.35rem);line-height:1.18;letter-spacing:-.015em;margin:0 0 16px;font-weight:600;color:var(--ink);text-wrap:balance}
h3{font-size:1.15rem;line-height:1.35;margin:24px 0 8px;font-weight:600;color:var(--ink)}
p{margin:0 0 14px;max-width:64ch;color:var(--ink-soft)}
.sub{font-size:1.15rem;color:var(--ink-soft);max-width:56ch}
ul,ol{padding-left:20px;margin:0 0 14px;max-width:64ch;color:var(--ink-soft)}
li{margin-bottom:8px}
.tlink{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px;transition:color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease)}
.tlink:hover{color:var(--accent-deep);border-color:var(--accent-deep)}
.pending{color:var(--ink-faint);font-style:italic}
.eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin:0 0 14px}
.accent{color:var(--accent)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:22px 32px;
  background:rgba(250,247,241,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:padding var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease),background var(--dur-s) var(--ease);
}
.nav.nav--scrolled{padding:13px 32px;border-color:var(--line);background:rgba(250,247,241,.96)}
.nav .logo{font-weight:600;letter-spacing:.06em;text-decoration:none;color:var(--ink);margin-right:auto;font-size:15px}
/* nav lockup: sun mark + wordmark */
.nav .logo.has-mark{display:inline-flex;align-items:center;gap:9px}
.nav .sumeru-mark{width:25px;height:auto;flex:none;display:block;color:var(--accent-soft);transition:transform var(--dur-s) var(--ease)}
.nav .logo:hover .sumeru-mark{transform:rotate(-8deg) scale(1.06)}
.nav .logo .logo-word{line-height:1}
.nav a{color:var(--ink-soft);text-decoration:none;font-size:14.5px;position:relative;transition:color var(--dur-s) var(--ease)}
.nav a:not(.cta):not(.logo)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-s) var(--ease)}
.nav a:not(.cta):not(.logo):hover{color:var(--ink)}
.nav a:not(.cta):not(.logo):hover::after{transform:scaleX(1)}
.nav a.active{color:var(--ink)}
.nav a.active::after{transform:scaleX(1);background:var(--navy-900)}
.nav .cta{
  border:1px solid var(--navy-900);background:var(--navy-900);color:var(--on-dark);
  padding:9px 18px;border-radius:999px;font-size:14px;
  transition:background var(--dur-s) var(--ease),transform var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease);
}
.nav .cta:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(210,80,0,.45)}

/* ---------- layout / sections ---------- */
main{max-width:780px;margin:0 auto;padding:0 24px 60px}
section{padding:52px 0;border-bottom:1px solid var(--line-soft)}
section:last-of-type{border-bottom:none}
.sec-mark{font-size:11px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase;margin:0 0 22px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--navy-900);padding:11px 20px;border-radius:999px;
  color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;
  margin:8px 10px 0 0;background:transparent;font-family:inherit;cursor:pointer;
  transition:transform var(--dur-s) var(--ease),box-shadow var(--dur-s) var(--ease),background var(--dur-s) var(--ease),color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease);
}
.btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.btn.primary{background:var(--navy-900);color:var(--on-dark)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);box-shadow:0 10px 24px -10px rgba(210,80,0,.4);color:var(--navy-950)}

/* ---------- placeholders (pre-redesign pages) ---------- */
.placeholder{border:1.5px dashed var(--line);background:transparent;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:14px;margin:22px 0}
.ph-hero{min-height:280px}
.ph-chart{min-height:230px}
.ph-photo{width:130px;height:150px;margin:0 0 12px;padding:8px;font-size:10px}

/* ---------- grids ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:10px}
.stat{border:1px solid var(--line);padding:18px;border-radius:10px;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.stat b{display:block;font-size:1.3rem;line-height:1.25;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.stat b .cur{color:var(--accent);font-weight:600}
.stat > span{font-size:13px;color:var(--ink-soft)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}
@media(max-width:680px){.cols,.cols3{grid-template-columns:1fr}}
.callout{border:1px solid var(--navy-900);padding:16px 18px;margin-top:22px;max-width:66ch;border-radius:10px}

/* ---------- table ---------- */
table{border-collapse:collapse;width:100%;font-size:15px;margin-top:8px}
td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;color:var(--ink-soft)}
td:first-child{font-weight:600;width:36%;background:var(--cream-deep);color:var(--ink)}

/* ---------- faq ---------- */
details{border-top:1px solid var(--line-soft);padding:10px 0}
.faq-group details:last-of-type{border-bottom:1px solid var(--line-soft)}
summary{cursor:pointer;font-weight:600;padding:4px 0;color:var(--ink)}
details p{margin-top:10px}

/* ---------- forms ---------- */
label{display:block;font-size:13px;letter-spacing:.04em;margin:16px 0 6px;color:var(--ink-soft)}
input,select,textarea{width:100%;max-width:520px;border:1px solid var(--line);padding:11px 13px;font-family:inherit;font-size:15px;background:var(--paper);border-radius:8px;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{min-height:120px}
.check{display:flex;align-items:flex-start;gap:10px;max-width:520px;margin-top:18px;font-size:14px;color:var(--ink-soft)}
.check input{width:auto;margin-top:3px}

/* ---------- footer ---------- */
footer{background:var(--navy-950);padding:56px 24px 34px;color:var(--on-dark-soft)}
.f-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px;font-size:14px}
.f-grid h4{font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin:0 0 14px;color:var(--sand);font-weight:600}
.f-grid a{display:block;color:var(--on-dark-soft);text-decoration:none;margin-bottom:9px;transition:color var(--dur-s) var(--ease)}
.f-grid a:hover{color:var(--on-dark)}
.f-grid p{font-size:13px;color:var(--on-dark-soft)}
footer .tlink{color:var(--on-dark);border-color:var(--accent)}
.f-bottom{max-width:1000px;margin:34px auto 0;padding-top:22px;border-top:1px solid var(--line-dark);font-size:12px;color:var(--on-dark-soft);line-height:1.7}
.f-bottom .pending{color:#8a8fb0}

/* ---------- entry disclaimer gate ---------- */
.gate{position:fixed;inset:0;background:rgba(10,15,40,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}
.gate-box{max-width:540px;border:1px solid var(--line);background:var(--paper);padding:34px;border-radius:14px;box-shadow:0 30px 60px -20px rgba(10,15,40,.35)}
.gate-box h2{font-size:1.3rem;margin-bottom:12px}
.gate-box p{font-size:14px;color:var(--ink-soft)}
.hidden{display:none}

/* ---------- shared scroll-reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-m) var(--ease),transform var(--dur-m) var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.reveal.is-visible{opacity:1;transform:translateY(0)}