/* Sarthak, versioned: Warm paper + rust. Each era overrides the tokens below; the "agents" era is the real theme. */
:root{
  --bg:#F6F2EA; --bg-img:none; --ink:#1B1B1B; --muted:#6E675C; --line:#E2DACB; --card:#FFFCF6;
  --acc:#A5432A; --acc-soft:#F3E2DA; --ok:#2FA35B; --warn:#D9A400;
  --r:12px; --head:Fraunces,Georgia,serif; --body:Inter,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --shadow:0 1px 2px rgba(27,27,27,.04),0 10px 24px -18px rgba(27,27,27,.35);
}
[data-era="college"]{--bg:#FFFFFF;--ink:#000;--muted:#444;--line:#BDBDBD;--card:#FFF;--acc:#0000EE;--acc-soft:#E6E6FF;--r:0px;
  --head:'Times New Roman',Times,serif;--body:'Times New Roman',Times,serif;--shadow:none}
[data-era="bosch"]{--bg:#EEF0F2;--ink:#1F2933;--muted:#5B6670;--line:#C9CFD5;--card:#FFF;--acc:#2F5F8A;--acc-soft:#DCE6EF;--r:2px;
  --head:Arial,Helvetica,sans-serif;--body:Arial,Helvetica,sans-serif;--shadow:none}
[data-era="startups"]{--bg:#F7F3FF;--bg-img:radial-gradient(60rem 30rem at 90% -10%,#FFE3F3,transparent),radial-gradient(50rem 30rem at -10% 20%,#E0ECFF,transparent);
  --ink:#231942;--muted:#6C6390;--line:#E4DCF7;--card:#FFF;--acc:#7C3AED;--acc-soft:#EDE4FF;--r:20px;--head:Inter,system-ui,sans-serif;
  --shadow:0 12px 30px -16px rgba(124,58,237,.35)}
[data-era="transition"]{--bg:#F4EFE8;--ink:#1E1B22;--muted:#6A6270;--line:#E0D6CF;--card:#FFFDF9;--acc:#8E3F5C;--acc-soft:#F1E1E7;--r:14px}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg) var(--bg-img);background-attachment:fixed;color:var(--ink);font:16px/1.55 var(--body);transition:background-color .5s,color .5s}
a{color:var(--acc)}
[data-era="college"] a{text-decoration:underline}
.card,.btn,.chip,.ask-in,.stack span,.mets span,.vnum{transition:background-color .5s,color .5s,border-color .5s,border-radius .5s,box-shadow .5s}
.mono,.ver{font-family:var(--mono)}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:-.01em}
[data-era="startups"] h1,[data-era="startups"] h2{font-weight:800;letter-spacing:-.03em}
.label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* status bar */
.status{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.status .wrap{display:flex;align-items:center;gap:10px;min-height:46px;font-size:13.5px;flex-wrap:wrap;padding-block:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.dot.boot{background:var(--muted);box-shadow:none;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.3}}
#sys{color:var(--ok);font-weight:600}
#sys.warn{color:#9A7400}#sys.boot{color:var(--muted)}
.who{color:var(--muted)}
.who b{color:var(--ink);font-weight:600}
.term-chip{margin-left:auto;display:flex;align-items:center;gap:8px;background:#17171B;color:#EDEDED;border:0;border-radius:8px;padding:5px 10px;font:500 12.5px var(--mono);cursor:pointer}
.term-chip small{color:#9A9AA5;font-size:11px}
@media (max-width:640px){.term-chip small,.who .role{display:none}}

/* hero */
.hero{padding:64px 0 28px}
.hero h1{font-size:clamp(42px,8vw,84px);line-height:.98}
.hero h1 em{color:var(--acc);font-style:italic}
[data-era="bosch"] .hero h1 em,[data-era="startups"] .hero h1 em{font-style:normal}
.hero p{color:var(--muted);font-size:clamp(16px,2.2vw,19px);max-width:56ch;margin-top:16px}
.btns{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r);border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;background:transparent}
.btn.p{background:var(--acc);border-color:var(--acc);color:#fff}
[data-era="college"] .btn{border:2px outset #ccc;background:#EFEFEF;color:#000;font-weight:400}

section{padding:36px 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sec-h h2{font-size:clamp(26px,3.6vw,36px)}
.sec-h .label{white-space:nowrap}

/* services */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:820px){.svc{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.svc .card{display:flex;flex-direction:column;gap:6px;padding:18px;min-height:190px}
.svc .card:hover{border-color:var(--acc)}
.svc .nm{display:flex;align-items:center;gap:9px;font-weight:600;font-size:17px}
.svc .d{color:var(--muted);font-size:14px}
.svc .m{font:600 34px/1 var(--head);margin-top:auto}
.svc .m small{display:block;font:500 12.5px var(--body);color:var(--muted);margin-top:4px}
.svc .go{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;font-weight:600}
.svc .go a{color:var(--acc);text-decoration:none}
.svc .go a:hover{text-decoration:underline}
.svc .go a+a{color:var(--muted)}
.svc .in{animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.empty{padding:26px;text-align:center;color:var(--muted);border:1.5px dashed var(--line);border-radius:var(--r)}
.empty b{display:block;color:var(--ink);font-family:var(--head);font-size:20px;margin-bottom:4px}
.stack{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:16px;font-size:13px;color:var(--muted)}
.stack span{background:var(--acc-soft);color:var(--ink);padding:3px 10px;border-radius:999px}
[data-era="college"] .stack span,[data-era="bosch"] .stack span{border-radius:var(--r)}

/* version history: a tall section whose inner frame pins while you scroll through v1 → v6 */
.versions{position:relative;padding:0;height:calc(100vh + var(--stops,6) * 70vh)}
.vpin{position:sticky;top:var(--bar,46px);height:calc(100vh - var(--bar,46px));height:calc(100svh - var(--bar,46px));display:flex;flex-direction:column;justify-content:center;padding:18px 0}
/* fixed-height body so the block stays centred and doesn't jump as versions with more projects come in */
.vbody{flex:0 1 auto;height:min(610px,calc(100% - 70px));min-height:0;display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:center}
.rail{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line);align-self:start}
.rail li{margin-left:-2px;border-left:2px solid transparent;transition:border-color .4s}
.rail li.past{border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.rail li.on{border-color:var(--acc)}
.rail button{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:8px 12px;font:inherit;font-size:14px;color:var(--muted);cursor:pointer}
.rail .vn{font:500 12px var(--mono);min-width:22px}
.rail li.on button{color:var(--ink);font-weight:600}
.rail li.on .vn{color:var(--acc)}
.vstage{min-width:0;min-height:0;max-height:100%;overflow:hidden}
.vhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.vnum{font:500 15px var(--mono);color:var(--acc);border:1.5px solid var(--acc);border-radius:var(--r);padding:1px 8px}
.vhead h3{font-size:clamp(28px,4.4vw,48px);line-height:1.02}
.vhead .cos{font-size:13px;color:var(--muted)}
.vblurb{color:var(--muted);margin:10px 0 16px;max-width:60ch}
.vcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.vcard{padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.vcard .co{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vcard b{font-family:var(--head);font-size:18px;font-weight:600;line-height:1.2}
.vcard p{font-size:13.5px;color:var(--muted)}
.mets{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.mets span{font:600 12px var(--body);color:var(--acc);background:var(--acc-soft);padding:2px 8px;border-radius:999px}
.vframe.enter .vhead,.vframe.enter .vblurb,.vframe.enter .stack{animation:rise .45s both}
.vframe.enter .vcard{animation:rise .5s both}
@media (max-width:820px){
  .vbody{grid-template-columns:1fr;gap:12px;grid-template-rows:auto 1fr;align-items:start;height:min(620px,calc(100% - 60px))}
  .rail{flex-direction:row;border-left:0;border-bottom:2px solid var(--line);overflow-x:auto}
  .rail li{margin:0 0 -2px;border-left:0;border-bottom:2px solid transparent}
  .rail .vt{display:none}
  .rail button{padding:6px 10px}
  .vcards{grid-template-columns:1fr 1fr;gap:8px}
  .vcard{padding:10px 12px}
  .vcard p{display:none}
  .vcard b{font-size:15px}
  .vblurb{margin:6px 0 10px;font-size:14px}
  .vframe .stack{display:none}
}

/* ask */
.ask{padding:20px}
.ask form{display:flex;gap:8px}
.ask-in{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--ink)}
.ask-in:focus{border-color:var(--acc);outline:none}
.ask-hint{font-size:13px;color:var(--muted);max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s,margin .3s}
.ask-hint.show{max-height:3em;opacity:1;margin-top:8px}
.ask-hint button{font:inherit;color:var(--acc);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sugg button.fresh{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.sugg button,.alts button{font:inherit;font-size:13px;background:var(--acc-soft);color:var(--ink);border:0;border-radius:999px;padding:5px 11px;cursor:pointer}
.trace{margin-top:20px;background:#17171B;color:#D6D6DC;border-radius:10px;padding:12px 14px;font:13px/1.8 var(--mono);display:none}
.trace.show{display:block}
.trace .st{display:flex;gap:10px}
.trace .st i{font-style:normal;color:#8C8C96;width:62px}
.trace .st.done b{color:#7EE2A8}
.trace .st.run b{color:#E9C46A}
.answer{margin-top:20px;font-size:16px;line-height:1.6}
.answer:empty{display:none}
.answer p+p{margin-top:8px}
.answer code{font:13px var(--mono);background:var(--acc-soft);padding:1px 5px;border-radius:4px}
.answer .note{font-size:14px;color:var(--muted);border-left:3px solid var(--acc);padding-left:10px;margin-bottom:10px}
.didyou{font-size:14px;color:var(--muted)}
.didyou b{color:var(--ink)}
.matched{font-size:14px;color:var(--muted)}
.matched b{color:var(--ink)}
.didyou button{font:inherit;color:var(--acc);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.alts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}

/* the Ask section stays folded away until the model is downloaded and warm, then unfolds */
section.reveal{padding:0;display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(18px);
  transition:grid-template-rows .9s cubic-bezier(.2,.8,.2,1),opacity .7s ease .25s,transform .8s cubic-bezier(.2,.8,.2,1) .25s}
section.reveal.ready{grid-template-rows:1fr;opacity:1;transform:none}
.reveal-in{min-height:0;overflow:hidden;padding:0 16px;margin:0 -16px} /* side room so the glow isn't clipped; 16px = the page gutter, so no sideways scroll on phones */
.reveal-pad{padding:36px 0}
.reveal.ready .ask{animation:glow 1.6s ease .6s}
@keyframes glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 35%,transparent)}100%{box-shadow:0 0 0 14px transparent}}

/* footer */
footer{padding:48px 0 64px;border-top:1px solid var(--line);margin-top:24px}
footer h2{font-size:clamp(28px,4vw,40px)}
footer p{color:var(--muted);margin-top:8px}
.contact{padding:18px;margin-top:20px;display:grid;gap:12px;max-width:640px}
.contact label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.contact input,.contact textarea{font:inherit;font-size:15px;font-weight:400;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r);padding:10px 12px;resize:vertical}
.contact input:focus,.contact textarea:focus{outline:none;border-color:var(--acc)}
.contact .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.contact .row2{grid-template-columns:1fr}}
.send-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.send-row .btn:disabled{opacity:.45;cursor:not-allowed}
.form-msg{font-size:14px;color:var(--muted)}
.form-msg.ok{color:var(--ok);font-weight:600}.form-msg.err{color:var(--acc);font-weight:600}
.or{margin-top:22px!important;font-size:14px}
.psst{margin-top:28px;font-size:13.5px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}