/* ---------------------------------------------------------
   Sudarshana Mukhopadhyay — personal site
   Design idea: a hydrologist's site should feel like a
   hydrograph — a quiet dark "night water" background, a
   drawn discharge curve as the recurring signature motif,
   sediment-clay accent for links, river-teal for data/flow.
--------------------------------------------------------- */

:root{
  --bg: #F7F5EF;
  --bg-alt: #EFEBE1;
  --bg-raised: #E7E1D3;
  --ink: #1D2A33;
  --ink-dim: #4E6270;
  --ink-faint: #7C8D97;
  --accent: #C98A4B;
  --accent-soft: #E0AE7C;
  --teal: #4FA8A0;
  --border: rrgba(29,42,51,0.14);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 18% 8%, rgba(79,168,160,0.08), transparent 42%),
                     radial-gradient(circle at 85% 92%, rgba(201,138,75,0.07), transparent 45%);
  z-index: 0;
}

a{ color: var(--accent-soft); text-decoration: none; border-bottom: 1px solid rgba(201,138,75,0.35); transition: border-color .15s, color .15s; }
a:hover{ color: var(--accent); border-color: var(--accent); }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

h1,h2,h3{ font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0; }

.wrap{ max-width: 760px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

/* ---------- nav ---------- */
header.site{
  position: sticky; top: 0; z-index: 10;
  background: rgba(15,36,54,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
header.site nav{
  max-width: 760px; margin: 0 auto; padding: 18px 28px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
}
header.site .wordmark{
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
  color: var(--ink); border: none; letter-spacing: 0.01em;
}
header.site .wordmark:hover{ color: var(--accent-soft); }
header.site ul{ list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
header.site ul a{
  border: none; color: var(--ink-dim); font-size: 0.92rem; letter-spacing: 0.03em;
  text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid transparent;
}
header.site ul a:hover{ color: var(--ink); border-color: var(--ink-faint); }
header.site ul a.current{ color: var(--accent-soft); border-color: var(--accent); }

/* ---------- hero ---------- */
.hero{ padding: 64px 0 12px; }
.hero .eyebrow{
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 14px; display: block;
}
.hero h1{ font-size: clamp(2.1rem, 5vw, 2.9rem); line-height: 1.12; }
.hero .tagline{ color: var(--ink-dim); font-size: 1.05rem; margin-top: 10px; }

/* hydrograph signature */
.hydrograph{ margin: 30px 0 6px; width: 100%; height: auto; display: block; }
.hydrograph path{
  fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: draw 1.6s ease-out forwards;
}
.hydrograph path.fill{ stroke: none; fill: url(#flowFill); animation: none; opacity: 0; animation: fadein 1s ease-out 0.6s forwards; }
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes fadein{ to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  .hydrograph path{ animation: none; stroke-dashoffset: 0; }
  .hydrograph path.fill{ animation: none; opacity: 1; }
}

/* ---------- section rhythm ---------- */
main{ padding-bottom: 90px; }
section{ padding: 40px 0; border-top: 1px solid var(--border); }
section:first-of-type{ border-top: none; }
section h2{
  font-size: 1.5rem; margin-bottom: 18px;
}
section h2 .num{ font-family: var(--mono); color: var(--ink-faint); font-size: 0.95rem; margin-right: 10px; }

p{ margin: 0 0 14px; color: var(--ink); }
p:last-child{ margin-bottom: 0; }
.lede{ color: var(--ink-dim); }

ul.plain{ padding-left: 20px; margin: 0; }
ul.plain li{ margin-bottom: 10px; }
ul.plain li:last-child{ margin-bottom: 0; }

/* ---------- data / doi styling ---------- */
.doi, code.doi{
  font-family: var(--mono); font-size: 0.88em; color: var(--teal);
  word-break: break-all;
}

/* ---------- cards (posts, projects) ---------- */
.card{
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 16px;
}
.card:last-child{ margin-bottom: 0; }
.card .date{ font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.card h3{ font-size: 1.15rem; margin: 6px 0 8px; }
.card h3 a{ border: none; color: var(--ink); }
.card h3 a:hover{ color: var(--accent-soft); }
.card p{ color: var(--ink-dim); font-size: 0.97rem; }

/* ---------- contact row ---------- */
.contact-row{ display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.contact-row a{ font-family: var(--mono); font-size: 0.92rem; }

/* ---------- CV button ---------- */
.cv-button{
  display: inline-block; margin-top: 6px;
  padding: 12px 22px; border-radius: 8px;
  background: var(--accent); color: #16232E; border: none;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
}
.cv-button:hover{ background: var(--accent-soft); color: #16232E; }

/* ---------- post page ---------- */
.post-hero img, .post-body img{
  width: 100%; border-radius: 10px; border: 1px solid var(--border); margin: 18px 0;
}
.post-body blockquote{
  margin: 20px 0; padding-left: 18px; border-left: 2px solid var(--teal);
  color: var(--ink-dim); font-style: italic;
}
.back-link{ font-family: var(--mono); font-size: 0.85rem; }

/* ---------- footer ---------- */
footer.site{
  border-top: 1px solid var(--border);
  padding: 34px 0 60px;
  color: var(--ink-faint);
  font-size: 0.88rem;
}
footer.site .socials{ display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; }
footer.site .socials a{ border: none; color: var(--ink-dim); font-family: var(--mono); font-size: 0.85rem; }
footer.site .socials a:hover{ color: var(--accent-soft); }

@media (max-width: 560px){
  header.site nav{ padding: 16px 20px; }
  header.site ul{ gap: 16px; }
  .wrap{ padding: 0 20px; }
}