/* Ram Mehta — professional minimal, 2026 refresh
   Inspired by leerob.io / p Austen — tight typography, lots of whitespace */
:root{
  --bg:#fcfcfa;
  --fg:#0f172a;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#e2e8f0;
  --line-2:#f1f5f9;
  --accent:#0f172a;
  --pill-bg:#f8fafc;
  --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,ui-sans-system,-apple-system,BlinkMacSystemFont,"SF Pro","Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.65;letter-spacing:-0.011em}
a{color:var(--fg);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

.wrap{max-width:760px;margin:0 auto;padding:36px 24px 88px}

/* nav */
.topnav{display:flex;justify-content:space-between;align-items:center;margin-bottom:64px;font-size:14px;letter-spacing:-0.01em}
.topnav .brand{font-weight:700;letter-spacing:-0.02em}
.topnav .navlinks{display:flex;gap:20px}
.topnav .navlinks a{color:var(--muted);font-weight:500}
.topnav .navlinks a:hover{color:var(--fg);text-decoration:none}

/* hero */
.hero{display:flex;flex-direction:column;gap:22px;align-items:center;margin-bottom:44px;text-align:center}
.hero img{width:128px;height:128px;border-radius:999px;object-fit:cover;border:1px solid var(--line);flex-shrink:0;box-shadow:0 1px 2px rgba(15,23,42,0.06)}
.hero h1{font-family: Georgia, "Times New Roman", ui-serif, serif; font-size:46px; line-height:0.96; letter-spacing:-0.02em; margin:8px 0 10px; font-weight:750; position:relative; z-index:1}
.hero .role{font-size:15.5px;font-weight:620;color:var(--fg);margin:0 0 12px;letter-spacing:-0.015em}
.hero .bio{font-size:16.8px;color:#334155;max-width:56ch;margin:0 auto;line-height:1.62;text-align:center}
.hero .bio strong{color:var(--fg);font-weight:650}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:12.2px;font-weight:600;color:#065f46;border:1px solid #d1fae5;background:#ecfdf5;padding:5px 11px;border-radius:999px;margin-bottom:14px;letter-spacing:-0.01em}
.kicker i{width:6px;height:6px;background:#10b981;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px #d1fae5}
.ctas{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center}
.btn{font-size:13.8px;font-weight:600;padding:9px 15px;border:1px solid var(--line);border-radius:999px;background:var(--card);display:inline-flex;align-items:center;gap:7px;transition:all .15s}
.btn.primary{background:var(--fg);color:white;border-color:var(--fg)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,0.08);text-decoration:none}
.btn:active{transform:translateY(0)}

/* sections */
.section{margin-top:48px;padding-top:32px;border-top:1px solid var(--line-2)}
.section h2{font-size:12.2px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-2);margin:0 0 20px;font-weight:700}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.card{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:16px 15px 14px;transition:border .15s}
.card:hover{border-color:#cbd5e1}
.card h3{font-size:13.8px;margin:0 0 7px;font-weight:680;letter-spacing:-0.01em}
.card p{font-size:13.8px;color:var(--muted);margin:0;line-height:1.52}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12.8px}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pill{font-size:12px;border:1px solid var(--line);background:var(--pill-bg);padding:4px 9px;border-radius:999px;color:var(--muted);font-weight:560}

/* writing list */
.posts{list-style:none;margin:0;padding:0}
.postrow{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px dashed #e2e8f0}
.postrow:last-child{border-bottom:none}
.postrow a{font-size:15px;font-weight:600;letter-spacing:-0.012em}
.postrow .date{font-size:12.8px;color:var(--muted-2);white-space:nowrap;margin-top:3px;font-family:ui-monospace,monospace}
.muted{color:var(--muted);font-size:14px}
.empty{padding:16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:14px;background:white}

/* blog list */
.page-title{font-size:26px;letter-spacing:-0.02em;margin:0 0 8px;font-weight:780}
.bloglist{list-style:none;padding:0;margin:12px 0 0}
.bloglist li{padding:16px 0;border-bottom:1px solid var(--line-2)}
.bloglist a{font-weight:650}
.bloglist .desc{margin-top:6px;color:#475569;font-size:14.2px;line-height:1.55}

/* footer */
.footer{margin-top:72px;padding-top:22px;border-top:1px solid var(--line-2);font-size:13px;color:var(--muted-2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;letter-spacing:-0.01em}
.footer a{color:var(--muted-2)}
.footer a:hover{color:var(--fg)}
.footlinks{display:flex;gap:14px}

@media(max-width:760px){
  .hero{flex-direction:column;gap:18px}
  .grid3{grid-template-columns:1fr}
  .hero h1{font-size:38px}
  .wrap{padding:26px 18px 64px}
  .topnav{margin-bottom:40px}
}

/* social icons — grayscale, home only */
.social{display:flex;gap:10px;margin-top:18px;align-items:center}
.social a{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);transition:all .15s}
.social a:hover{color:var(--fg);border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,23,42,0.06);text-decoration:none}
.social a svg{width:16px;height:16px;display:block;fill:currentColor}

.hero > div{display:flex;flex-direction:column;align-items:center;width:100%}

.section .kicker{margin-left:0;text-align:left}

/* Top subtle pattern that bleeds into white */
.wrap{position:relative; z-index:1}
.top-pattern{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  height:560px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(680px 340px at 18% -8%, rgba(100,116,139,0.13), transparent 62%),
    radial-gradient(560px 280px at 82% 2%, rgba(14,165,233,0.10), transparent 62%),
    radial-gradient(420px 260px at 50% 12%, rgba(99,102,241,0.07), transparent 70%);
}

.top-pattern::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(148,163,184,0.09) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(-45deg, rgba(148,163,184,0.09) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(45deg, rgba(148,163,184,0.05) 0 2px, transparent 2px 120px),
    repeating-linear-gradient(-45deg, rgba(148,163,184,0.05) 0 2px, transparent 2px 120px);
  opacity:0.95;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.85) 18%, rgba(0,0,0,0.55) 36%, rgba(0,0,0,0.22) 56%, rgba(0,0,0,0.08) 72%, transparent 88%);
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.85) 18%, rgba(0,0,0,0.55) 36%, rgba(0,0,0,0.22) 56%, rgba(0,0,0,0.08) 72%, transparent 88%);
}





.top-pattern::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(252,252,250,0) 0%, rgba(252,252,250,0.15) 42%, rgba(252,252,250,0.75) 72%, rgba(252,252,250,1) 92%);
  /* fade the dots and blobs into the white */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 28%, rgba(0,0,0,0.55) 52%, rgba(0,0,0,0.18) 76%, transparent 92%);
  mask-image: linear-gradient(to bottom, black 0%, black 28%, rgba(0,0,0,0.55) 52%, rgba(0,0,0,0.18) 76%, transparent 92%);
}


/* responsive kicker in socials row */
.social-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top:18px;
}
.social-row .kicker{
  margin:0;
  white-space:nowrap;
}
@media (max-width: 520px){
  .social-row{
    justify-content:center;
    row-gap:10px;
  }
  .social-row .kicker{
    flex-basis:100%;
    display:flex;
    justify-content:center;
    white-space:nowrap;
    margin-top:2px;
  }
}