/* ============================================================
   Sharayu Maknikar — personal site
   System: Modern minimal tech · warm cream + ink + amber accent
   Type:   Space Grotesk (display) / Instrument Sans (body) / Space Mono (labels)
   ============================================================ */

:root{
  /* palette — warm cream, warm ink, single burnt-amber accent */
  --cream:      #F4EEE2;
  --cream-2:    #EDE5D5;   /* deeper panel */
  --paper:      #FBF7EE;   /* lightest card */
  --ink:        #1E1A15;   /* warm near-black */
  --ink-2:      #4B4339;   /* muted body text */
  --ink-3:      #8B8273;   /* captions / faint */
  --accent:     #C2562C;   /* burnt amber */
  --accent-2:   #A8451f;   /* darker amber (hover) */
  --accent-tint:#EBC9B4;
  --line:       rgba(30,26,21,.12);
  --line-2:     rgba(30,26,21,.22);

  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Instrument Sans', system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 72px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--cream); }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; }

/* paper grain — extremely subtle warmth, no gradients */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(30,26,21,.018) 1px, transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:multiply;
}

/* ---------- typography helpers ---------- */
.display{ font-family:var(--font-display); font-weight:700; line-height:.98; letter-spacing:-.02em; }
.mono{ font-family:var(--font-mono); }
.kicker{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3);
  display:inline-flex; align-items:center; gap:.6em;
}
.kicker::before{
  content:""; width:26px; height:1px; background:var(--accent); display:inline-block;
}
.accent{ color:var(--accent); }

h1,h2,h3{ margin:0; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); position:relative; z-index:1; }
.section{ padding-block:clamp(72px,11vw,150px); position:relative; }

/* ---------- custom cursor (home only) ---------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  mix-blend-mode:multiply;
}
.cursor-dot{ width:7px; height:7px; background:var(--accent); }
.cursor-ring{
  width:38px; height:38px; border:1px solid var(--accent);
  transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .25s;
  opacity:.7;
}
.cursor-ring.hot{ width:62px; height:62px; background:rgba(194,86,44,.08); opacity:1; }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:background .4s var(--ease), border-color .4s, padding .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--cream) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding-block:13px;
}
/* when the mobile overlay is open the menu provides the surface —
   drop the nav's own blur/background so it doesn't fog the overlay */
.nav.menu-open{ background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
.nav-mark{ position:relative; z-index:230; }
.nav-mark{ font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
.nav-mark .glyph{ width:20px; height:20px; flex:none; }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-link{
  position:relative; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:9px 16px; border-radius:100px; color:var(--ink-2);
  transition:color .3s, background .3s;
}
.nav-link:hover{ color:var(--ink); }
.nav-link.active{ color:var(--accent); }
.nav-link .num{ color:var(--ink-3); margin-right:.5em; font-size:10px; }
.nav-link.active .num{ color:var(--accent); }

/* ---------- mobile hamburger + overlay menu ---------- */
.nav-burger{
  display:none; /* shown < 720px */
  position:relative; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-2); background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  transition:border-color .3s, background .3s; z-index:230;
}
.nav-burger span{
  display:block; width:19px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s, width .35s var(--ease);
}
.nav-burger.on{ border-color:var(--accent); }
.nav-burger.on span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); background:var(--accent); }
.nav-burger.on span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); background:var(--accent); }

.mobile-menu{
  position:fixed; inset:0; z-index:220;
  background:var(--cream);
  display:flex; align-items:stretch; justify-content:stretch;
  opacity:0; visibility:hidden; pointer-events:none;
  clip-path:circle(0% at calc(100% - 44px) 40px);
  transition:clip-path .55s var(--ease-out), opacity .3s, visibility .3s;
}
.mobile-menu.open{ opacity:1; visibility:visible; pointer-events:auto; clip-path:circle(150% at calc(100% - 44px) 40px); }
.mm-inner{ width:100%; padding:104px var(--pad) 40px; display:flex; flex-direction:column; }
.mm-kicker{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); padding-bottom:18px; border-bottom:1px solid var(--line); }
.mm-link{
  display:flex; align-items:center; gap:18px; padding:26px 4px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(34px,11vw,52px); color:var(--ink);
  transform:translateY(14px); opacity:0;
}
.mobile-menu.open .mm-link{ animation:mmIn .5s var(--ease-out) forwards; }
.mobile-menu.open .mm-link:nth-child(2){ animation-delay:.12s; }
.mobile-menu.open .mm-link:nth-child(3){ animation-delay:.19s; }
.mobile-menu.open .mm-link:nth-child(4){ animation-delay:.26s; }
@keyframes mmIn{ to{ transform:none; opacity:1; } }
.mm-num{ font-size:14px; color:var(--ink-3); align-self:flex-start; margin-top:10px; }
.mm-label{ flex:1; }
.mm-link.active{ color:var(--accent); }
.mm-link.active .mm-num{ color:var(--accent); }
.mm-arr{ font-size:22px; color:var(--ink-3); }
.mm-link.active .mm-arr{ color:var(--accent); }
.mm-foot{ margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:8px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }

@media (max-width:720px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
}
@media (prefers-reduced-motion:reduce){
  .mobile-menu{ transition:opacity .2s, visibility .2s; clip-path:none; }
  .mobile-menu.open .mm-link{ animation:none; transform:none; opacity:1; }
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--cream);
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--bg); color:var(--fg);
  padding:15px 26px; border-radius:100px; border:1px solid var(--bg);
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out), background .4s, color .4s, border-color .4s;
}
.btn .arr{ transition:transform .4s var(--ease-out); }
.btn:hover{ transform:translateY(-3px); }
.btn:hover .arr{ transform:translate(4px,-4px); }
.btn.ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line-2); }
.btn.ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn.accent-btn{ --bg:var(--accent); --fg:var(--cream); border-color:var(--accent); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
/* force-visible with no transition — used when the document isn't
   visible (offscreen/background), where transitions freeze at 0 */
.reveal.shown{ opacity:1 !important; transform:none !important; transition:none !important; }
[data-d="1"]{ transition-delay:.08s; }
[data-d="2"]{ transition-delay:.16s; }
[data-d="3"]{ transition-delay:.24s; }
[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; }
  *{ scroll-behavior:auto; }
}

/* ---------- page transition ----------
   transform-only (no opacity gate) so content is never blank even if
   the animation is frozen by a throttled/hidden document. */
.page{ animation:pageIn .6s var(--ease-out) both; }
@keyframes pageIn{ from{ transform:translateY(16px);} to{ transform:none; } }

/* ---------- footer ---------- */
.foot{
  background:var(--ink); color:var(--cream);
  padding:clamp(56px,8vw,96px) 0 36px;
  position:relative; z-index:1; overflow:hidden;
}
.foot a{ color:var(--cream); }
.foot .wrap{ position:relative; z-index:2; }
.foot-big{ font-family:var(--font-display); font-weight:700; line-height:.95; letter-spacing:-.02em;
  font-size:clamp(40px,8vw,108px); }
.foot-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; align-items:flex-end; }
.foot-meta{ display:flex; gap:40px; flex-wrap:wrap; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:rgba(244,238,226,.6); text-transform:uppercase; }
.foot-rule{ height:1px; background:rgba(244,238,226,.16); margin:40px 0 22px; }

/* ---------- utility chips / tags ---------- */
.tag{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 13px; border:1px solid var(--line-2); border-radius:100px; color:var(--ink-2);
  display:inline-block; transition:border-color .3s, color .3s, background .3s;
}
.tag:hover{ border-color:var(--accent); color:var(--accent); }

/* hairline divider */
.hr{ height:1px; background:var(--line); border:0; margin:0; }