/* =========================================================
   Koushik Maturi — portfolio design system
   Extracted & extended from the original hero reference.
   Palette · Excon (display/headings) + Ranade (body) · grain · motion · theme.
   See DESIGN_MANIFESTO.md for the rationale behind every choice here.
   ========================================================= */

/* — Fonts (Fontshare CDN) — Excon (display/headings) + Ranade (body) — */
@import url('https://api.fontshare.com/v2/css?f[]=excon@400,500,600&f[]=ranade@400,500&display=swap');

/* — Tokens — */
:root{
  --bg:#f4ecda;
  --tx:#1f1b14;
  --mut:#6f6757;
  --bd:#e3d8c0;
  --ac:#a4641a;
  --card:#faf6ec;
  --maxw:1240px;
  --padX:clamp(26px,6vw,80px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
[data-theme="dark"]{
  --bg:#141210;
  --tx:#efece4;
  --mut:#928f86;
  --bd:#2a2722;
  --ac:#e2a64a;
  --card:#1b1813;
}

*{box-sizing:border-box;margin:0;padding:0}
/* Uniform ~7% scale-down of the whole site (type + spacing) to match the
   reference proportions. Adjust this single value to scale everything. */
html{scroll-behavior:smooth;zoom:0.93}
html,body{min-height:100%}
body{
  background:var(--bg);
  color:var(--tx);
  font-family:'Ranade',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  transition:background .35s ease,color .35s ease;
}
::selection{background:var(--ac);color:var(--bg)}
a{color:inherit}

/* — Grain overlay — */
#km-grain{
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)' opacity='.12'/></svg>");
  background-repeat:repeat;mix-blend-mode:multiply;opacity:1;transition:opacity .35s ease;
}
[data-theme="dark"] #km-grain{opacity:0}

/* — Layout — */
.wrap{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--padX)}
.section{padding:clamp(64px,9vh,128px) 0}
.section--tight{padding:clamp(44px,6vh,84px) 0}

/* — Type — */
.eyebrow{
  font-family:'Excon',sans-serif;font-weight:500;
  font-size:clamp(14.5px,1.5vw,16.5px);color:var(--ac);
  letter-spacing:.01em;
}
.rule{height:2px;width:54px;background:var(--ac);transform-origin:left;margin:16px 0 26px}
/* Section label — replaces the old eyebrow+rule+big-title stack */
/* Section label = a quiet marker, not a headline. Small, muted, recedes. */
.sec-label{font-family:'Excon',sans-serif;font-weight:500;font-size:14px;color:var(--ac);letter-spacing:.05em;line-height:1.1}
.sec-sub{color:var(--mut);font-size:clamp(15px,1.3vw,17px);line-height:1.55;max-width:54ch;margin-top:10px}
h1,h2,h3{font-family:'Excon',sans-serif;font-weight:600;line-height:1.05;letter-spacing:-.01em}
h2{font-size:clamp(28px,4vw,46px)}
h3{font-size:clamp(20px,2.2vw,26px);font-weight:500}
.lede{font-size:clamp(15px,1.4vw,18px);line-height:1.5;letter-spacing:-.005em;color:var(--tx);max-width:44ch;text-wrap:pretty}
.mut{color:var(--mut)}

/* — Buttons / links — */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Excon',sans-serif;font-weight:500;font-size:14px;letter-spacing:.01em;
  color:var(--bg);background:var(--ac);text-decoration:none;border:none;
  border-radius:40px;padding:10px 24px;cursor:pointer;
  transition:opacity .2s,transform .18s var(--ease);
}
.btn:hover{opacity:.85;transform:translateY(-1px)}
.btn--ghost{
  background:transparent;color:var(--ac);border:1px solid var(--bd);
}
.btn--ghost:hover{border-color:var(--ac);opacity:1}
.txtlink{color:var(--mut);text-decoration:none;transition:color .2s}
.txtlink:hover{color:var(--ac)}
.arrow{transition:transform .2s var(--ease)}
a:hover .arrow{transform:translateX(3px)}

/* — Nav — */
.nav{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:clamp(26px,4.5vw,52px) 0 0;
}
.nav__links{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);font-family:'Excon',sans-serif;font-size:14.5px;color:var(--mut)}
.nav__links a{text-decoration:none;color:var(--mut);transition:color .2s}
.nav__links a:hover{color:var(--ac)}
.brand{font-family:'Excon',sans-serif;font-weight:600;font-size:17px;text-decoration:none;color:var(--tx)}
.nav__brand{display:flex;align-items:center;gap:13px;min-width:0}
/* Greeting = single button, exactly per reference */
.greeting{display:inline-flex;align-items:baseline;gap:7px;font-family:'Excon',sans-serif;font-weight:500;font-size:16px;color:var(--mut);letter-spacing:.005em;background:transparent;border:0;padding:0;text-align:left;cursor:pointer;transition:color .22s ease;min-width:0}
.greeting:hover{color:var(--tx)}
.greeting > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.greeting .cyc{font-size:12px;opacity:.55;transform:translateY(-1px);flex:none}
@media(max-width:560px){.greeting > span:first-child{max-width:46vw}}
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;color:var(--ac);background:transparent;
  border:1px solid var(--bd);border-radius:50%;cursor:pointer;flex:none;
  transition:border-color .2s,transform .18s var(--ease);
}
.theme-toggle:hover{border-color:var(--ac);transform:rotate(12deg)}

/* — Cards (work / writing) — */
.grid{display:grid;gap:clamp(18px,2vw,28px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.grid--2,.grid--3{grid-template-columns:1fr}}

.card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--card);border:1px solid var(--bd);border-radius:14px;
  padding:clamp(22px,2.4vw,32px);text-decoration:none;color:inherit;
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s;
}
.card:hover{transform:translateY(-4px);border-color:var(--ac);box-shadow:0 14px 40px -22px rgba(31,27,20,.4)}
.card__tag{font-family:'Excon',sans-serif;font-weight:500;font-size:13px;letter-spacing:.01em;color:var(--ac)}
.card__title{font-family:'Excon',sans-serif;font-weight:600;font-size:clamp(19px,2vw,24px);line-height:1.1}
.card__desc{color:var(--mut);font-size:15px;line-height:1.5}
.card__stat{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:3px}
.card__stat b{font-family:'Excon',sans-serif;font-weight:600;font-size:28px;color:var(--ac);line-height:1}
.card__stat span{font-size:12.5px;color:var(--mut)}
.card__more{margin-top:auto;padding-top:14px;font-family:'Excon',sans-serif;font-weight:500;font-size:14px;color:var(--ac)}

/* — Animations — */
@keyframes kmFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kmDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kmIconIn{from{opacity:0;transform:rotate(-130deg) scale(.25)}to{opacity:1;transform:rotate(0) scale(1)}}
.reveal{opacity:0}
.reveal.in{animation:kmFadeUp .7s var(--ease) both}
.rule.in{animation:kmDraw .85s var(--ease) .2s both}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important}
  .reveal{opacity:1}
}

/* — Media (images / looping video inside case studies) — */
.cs-media{margin:clamp(26px,4vh,44px) 0}
.cs-media img,.cs-media video{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--bd);background:var(--card)}
.cs-media figcaption{margin-top:10px;font-size:13px;color:var(--mut);line-height:1.5}

/* — Footer — */
.footer{border-top:1px solid var(--bd);padding:clamp(48px,6vw,72px) 0 clamp(40px,5vw,56px)}
.footer__grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;align-items:flex-start}
.footer__links{display:flex;flex-wrap:wrap;gap:18px;font-size:15px}
.footer__links a{text-decoration:none;color:var(--mut);transition:color .2s}
.footer__links a:hover{color:var(--ac)}
.footer__fine{color:var(--mut);font-size:13px;margin-top:28px}