/* yogeshgahlot.com — personal site.
   Distinct from Æshar (warm amber/ivory, not jade). Self-hosted fonts, no external requests. */

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Outfit-300.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Outfit-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/CormorantGaramond-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/CormorantGaramond-300Italic.woff2") format("woff2"); }

:root {
  --bg:        #0B0A08;   /* warm near-black */
  --surface:   #17140F;
  --amber:     #E0A868;   /* primary accent — warm */
  --amber-dim: #C98A44;
  --ivory:     #F2EBDE;
  --text:      #ECE6DA;
  --text-dim:  #A79B86;
  --text-faint:#6E6656;
  --line:      rgba(224,168,104,0.16);
  --line-soft: rgba(236,230,218,0.08);
  --card:      rgba(23,20,15,0.6);

  --sans:  "Outfit", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif: "Cormorant Garamond", ui-serif, Georgia, serif;

  --readw: 680px;
  --space-s: 16px; --space-m: 22px; --space-l: 32px; --space-xl: clamp(40px, 6vh, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(16px, 15px + 0.3vw, 18px); line-height: 1.75;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; min-height: 100vh;
}
::selection { background: rgba(224,168,104,0.22); color: #fff; }

/* warm wash + faint grain of light */
.wash {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 42% at 22% 8%, rgba(224,168,104,0.12), transparent 70%),
    radial-gradient(50% 40% at 82% 90%, rgba(201,138,68,0.08), transparent 70%),
    linear-gradient(180deg, #100D09 0%, #0B0A08 60%, #080706 100%);
}

.wrap { max-width: var(--readw); margin: 0 auto; padding: 0 clamp(22px, 6vw, 40px); }
section { padding: clamp(40px, 7vh, 72px) 0; }

/* nav */
nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(22px, 6vw, 40px);
  background: rgba(11,10,8,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
nav .name { font-family: var(--serif); font-size: 19px; letter-spacing: 0.03em; color: var(--text); }
nav .links a { margin-left: 20px; font-size: 14px; color: var(--text-dim); }
nav .links a:hover { color: var(--amber); }

a { color: var(--amber); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--ivory); }

/* hero */
.hero { padding: clamp(80px, 16vh, 150px) 0 clamp(40px, 7vh, 72px); }
.hero .kicker { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--amber-dim); margin-bottom: var(--space-m); }
.hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 9vw, 76px); line-height: 1.05; letter-spacing: 0.01em; color: var(--ivory); }
.hero .lede { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 3.2vw, 28px); color: var(--text-dim); margin-top: var(--space-m); line-height: 1.4; }

/* prose */
h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 4vw, 34px); color: var(--ivory); margin-bottom: var(--space-m); letter-spacing: 0.01em; }
p { color: var(--text-dim); }
p + p { margin-top: var(--space-s); }
strong { color: var(--text); font-weight: 500; }
.pull { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 3vw, 26px); color: var(--amber); line-height: 1.5; margin: var(--space-xl) 0; padding-left: 22px; border-left: 2px solid var(--line); }

.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); }

/* facts list */
.facts { list-style: none; margin-top: var(--space-l); display: grid; gap: 14px; }
.facts li { position: relative; padding-left: 26px; color: var(--text-dim); }
.facts li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(224,168,104,0.6); }
.facts strong { color: var(--text); }

/* project card */
.project { margin-top: var(--space-l); padding: 26px 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.project h3 { font-family: var(--serif); font-weight: 300; font-size: 24px; color: var(--ivory); margin-bottom: 6px; }
.project p { font-size: 15.5px; }
.project .go { display: inline-block; margin-top: 16px; font-size: 14px; letter-spacing: 0.06em; }

/* footer */
footer { border-top: 1px solid var(--line-soft); padding: 40px 24px 72px; text-align: center; color: var(--text-dim); font-size: 14px; }
footer .links a { margin: 0 12px; }
footer .fine { opacity: 0.7; font-size: 12.5px; margin-top: 12px; }

/* reveal */
.veil { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.16,.84,.28,1), transform .9s cubic-bezier(.16,.84,.28,1); }
.veil.lifted { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .veil { opacity: 1; transform: none; }
  * { transition-duration: 0.01ms !important; }
}