/* Enitan Eleto Portfolio v3 — Minimalist
   DM Serif Display (headings) · DM Sans (body)
   Near-black #111 · Warm white #FAFAF8 · Navy accent #0B1F3A
   No gradients. No cards. No noise. */

:root {
  --ink:     #111111;
  --ink-2:   #444444;
  --ink-3:   #777777;
  --bg:      #FAFAF8;
  --bg-off:  #F2F1EE;
  --accent:  #0B1F3A;
  --border:  #E0DDD8;
  --max:     1060px;
  --ease:    cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  line-height:1.7;font-size:1rem;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
input,textarea{font:inherit}
p{color:var(--ink-2)}
p+p{margin-top:.8rem}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* Type */
h1{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(3rem,7vw,5.5rem);font-weight:400;line-height:1.0;letter-spacing:-.02em;color:var(--ink)}
h2{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:400;line-height:1.1;letter-spacing:-.015em;color:var(--ink);margin-bottom:1rem}
h3{font-family:'DM Sans',sans-serif;font-size:1.2rem;font-weight:600;color:var(--ink);margin-bottom:.2rem}
.mono{font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.7rem}
.lead{font-size:1.1rem;color:var(--ink);max-width:50ch;margin-bottom:1rem}

/* Layout */
.container{max-width:var(--max);margin:0 auto;padding:0 1.5rem}
.container.narrow{max-width:720px}
.section{padding:6rem 0}
.bg-off{background:var(--bg-off)}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:999;font-weight:600}
.skip:focus{left:1rem;top:1rem}
.hidden{position:absolute;left:-9999px}

/* Pills */
.pill-dark,.pill-outline{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.88rem;font-weight:500;
  padding:.65rem 1.4rem;border-radius:99px;
  transition:transform .2s var(--ease),background .2s,color .2s;
}
.pill-dark:hover,.pill-outline:hover{transform:translateY(-1px)}
.pill-dark{background:var(--accent);color:#fff}
.pill-dark:hover{background:#1a3558}
.pill-outline{border:1.5px solid var(--border);color:var(--ink)}
.pill-outline:hover{border-color:var(--accent);color:var(--accent)}

/* ── Header ── */
#hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(250,250,248,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.hdr-inner{
  max-width:var(--max);margin:0 auto;padding:.9rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:'DM Serif Display',serif;font-size:1.1rem;color:var(--ink)}
#hdr nav{display:flex;gap:1.8rem}
#hdr nav a{font-size:.88rem;color:var(--ink-2);transition:color .2s}
#hdr nav a:hover{color:var(--ink)}

/* ── Hero / Top ── */
.top{padding:9rem 0 6rem;border-bottom:1px solid var(--border)}
.top-grid{display:grid;grid-template-columns:1fr 340px;gap:4rem;align-items:center}
.top-text h1{margin-bottom:.4rem}
.top-aka{font-family:'DM Serif Display',serif;font-size:1.4rem;font-style:italic;color:var(--ink-2);margin-bottom:1.2rem}
.top-bio{max-width:44ch;margin-bottom:1.8rem}
.top-links{display:flex;gap:.8rem;flex-wrap:wrap}

.top-photo{position:relative}
.founder-photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:4px;display:block;filter:grayscale(15%)}
.photo-tag{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.8rem}
.photo-tag span{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--border);padding:.3rem .7rem;border-radius:99px}

/* ── About ── */
.about-stats{display:flex;gap:3rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border);flex-wrap:wrap}
.astat{display:flex;flex-direction:column;gap:.2rem}
.astat-n{font-family:'DM Serif Display',serif;font-size:2.4rem;color:var(--ink)}
.astat-n sup{font-size:1.2rem}
.astat-l{font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* ── Ventures ── */
.venture-block{padding:3rem 0;border-bottom:1px solid var(--border)}
.venture-block:first-of-type{border-top:1px solid var(--border);margin-top:2rem}
.venture-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.8rem;flex-wrap:wrap;gap:.8rem}
.venture-num{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.4rem}
.venture-type{font-size:.82rem;color:var(--ink-3);margin-top:.15rem}
.tag{font-size:.72rem;font-weight:600;padding:.35rem .8rem;border-radius:99px;white-space:nowrap}
.tag-live{background:#e8f5ee;color:#2d7a4a}
.tag-dev{background:#fff4e6;color:#b85c00}

.venture-body{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.venture-body.full{grid-template-columns:1fr}
.venture-text p{max-width:50ch}
.venture-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.2rem}
.venture-tags span{font-size:.76rem;font-weight:500;padding:.3rem .7rem;border:1px solid var(--border);border-radius:99px;color:var(--ink-2)}
.venture-images{display:flex;flex-direction:column;gap:.8rem}
.venture-img-sq{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}
.venture-img-app{width:60%;aspect-ratio:320/560;object-fit:cover;border-radius:12px;border:8px solid var(--bg-off);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.venture-role-note{font-size:.88rem;color:var(--ink-2);margin-top:.8rem}
.venture-role-note strong{color:var(--ink);font-weight:600}
.summit-contact{font-size:.84rem;color:var(--ink-2);margin-top:1rem}
.summit-contact a{color:var(--accent);text-decoration:underline}

/* ── Quotes ── */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.quote{padding:1.6rem;border-left:3px solid var(--border)}
.quote blockquote{font-family:'DM Serif Display',serif;font-style:italic;font-size:1rem;line-height:1.55;color:var(--ink);margin-bottom:.8rem}
.quote figcaption{font-size:.78rem;color:var(--ink-3)}
.quote figcaption em{font-style:normal}

/* ── Contact ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem;margin-top:2rem;align-items:start}
.contact-list{display:flex;flex-direction:column;gap:.8rem}
.contact-list a{font-size:.92rem;color:var(--ink-2);border-bottom:1px solid var(--border);padding-bottom:.6rem;transition:color .2s}
.contact-list a:hover{color:var(--accent)}
.contact-form{display:flex;flex-direction:column;gap:.6rem}
.fg{display:flex;flex-direction:column;gap:.3rem}
.fg label{font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.fg input,.fg textarea{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.7rem .85rem;color:var(--ink);font-size:.9rem;transition:border-color .2s}
.fg input:focus,.fg textarea:focus{border-color:var(--accent);outline:none}
.fg textarea{resize:vertical}
.form-note{font-size:.8rem;color:var(--accent);min-height:1.2em;font-weight:500}

/* ── Footer ── */
footer{border-top:1px solid var(--border);padding:1.5rem 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
footer p{font-size:.78rem;color:var(--ink-3)}
footer nav{display:flex;gap:1.4rem}
footer nav a{font-size:.78rem;color:var(--ink-3);transition:color .2s}
footer nav a:hover{color:var(--ink)}

/* ── Responsive ── */
@media(max-width:860px){
  .top-grid{grid-template-columns:1fr;gap:2.5rem}
  .top-photo{max-width:280px}
  .venture-body{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:2rem}
  .quotes{grid-template-columns:1fr}
  #hdr nav{gap:1.2rem}
}
@media(max-width:560px){
  .top{padding:7rem 0 4rem}
  .section{padding:4rem 0}
  .about-stats{gap:1.5rem}
  .venture-img-app{width:80%}
}