/* ============================================================
   Esther Ogunbayo · personal portfolio
   iOS-clean design system. Shared across all pages.
   ============================================================ */

:root{
  /* surfaces */
  --bg:        #f5f5f7;
  --surface:   #ffffff;
  --surface-2: #fbfbfd;

  /* ink */
  --ink:   #1d1d1f;
  --ink-2: #515154;
  --ink-3: #86868b;

  /* lines */
  --line:        #e8e8ed;
  --line-strong: #d2d2d7;

  /* accent + semantic */
  --blue:       #007aff;
  --blue-press: #0a66d0;
  --blue-soft:  #eaf3ff;
  --green:      #1f9d57;
  --green-soft: #e7f6ee;
  --red:        #e0352b;
  --amber:      #c77700;

  /* geometry */
  --r:    22px;
  --r-sm: 16px;
  --r-xs: 11px;
  --shadow:    0 2px 10px rgba(0,0,0,.04), 0 10px 34px -16px rgba(20,20,40,.18);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.06), 0 30px 70px -28px rgba(20,20,40,.30);

  --maxw: 1080px;
  --nav-h: 54px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text","Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", ui-monospace, "IBM Plex Mono", Menlo, monospace;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--blue); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4,p{ margin:0; }

/* ---------- type helpers ---------- */
.display{
  font-weight:700; letter-spacing:-.025em; line-height:1.04;
  text-wrap:balance;
}
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--blue); text-transform:none;
}
.lead{ font-size:clamp(18px,2.1vw,21px); color:var(--ink-2); line-height:1.55; text-wrap:pretty; }
.muted{ color:var(--ink-3); }
.mono{ font-family:var(--mono); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:clamp(64px,9vw,116px) 0; }
.section-tight{ padding:clamp(44px,6vw,72px) 0; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.07);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; height:100%;
  padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; letter-spacing:-.01em; }
.brand .mono-mark{
  width:27px; height:27px; border-radius:8px;
  background:var(--ink); color:#fff;
  display:grid; place-items:center;
  font-weight:600; font-size:12px; letter-spacing:.02em;
}
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  font-size:14px; font-weight:450; color:var(--ink-2);
  padding:7px 13px; border-radius:980px; transition:color .15s, background .15s;
}
.nav-links a:hover{ color:var(--ink); background:rgba(0,0,0,.045); }
.nav-links a.active{ color:var(--ink); font-weight:550; }
.nav-cta{
  font-size:14px; font-weight:550;
  color:#fff !important; background:var(--blue);
  padding:7px 16px !important; border-radius:980px;
  transition:background .15s, transform .15s;
}
.nav-cta:hover{ background:var(--blue-press) !important; transform:translateY(-1px); }
.nav-toggle{
  display:none; width:38px; height:38px; border:none; background:none; cursor:pointer;
  color:var(--ink); align-items:center; justify-content:center; border-radius:10px;
}
.nav-toggle:hover{ background:rgba(0,0,0,.05); }
.mobile-menu{ display:none; }

@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-menu{
    display:block; position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99;
    background:rgba(255,255,255,.94); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-110%); transition:transform .28s cubic-bezier(.4,0,.2,1);
    padding:8px 24px 18px;
  }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu a{
    display:block; padding:14px 4px; font-size:17px; font-weight:500;
    color:var(--ink); border-bottom:1px solid var(--line);
  }
  .mobile-menu a:last-child{ border-bottom:none; color:var(--blue); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-size:16px; font-weight:550;
  padding:13px 24px; border-radius:980px; cursor:pointer; border:1px solid transparent;
  transition:transform .15s, background .15s, border-color .15s, color .15s;
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:var(--blue-press); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover{ background:#fff; border-color:var(--ink-3); transform:translateY(-1px); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; transform:translateY(-1px); }
.btn-sm{ font-size:14px; padding:9px 17px; }
.linkarrow{ color:var(--blue); font-weight:550; font-size:16px; display:inline-flex; align-items:center; gap:6px; }
.linkarrow svg{ width:15px; height:15px; transition:transform .18s; }
.linkarrow:hover svg{ transform:translateX(3px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,64px); }
.hero h1{ font-size:clamp(40px,7vw,76px); }
.hero .lead{ margin-top:22px; max-width:38ch; }
.hero-actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:44px; align-items:center; }
.hero-grid .avatar-wrap{ max-width:300px; justify-self:center; width:100%; }
@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; gap:30px; }
  .hero-grid .avatar-wrap{ max-width:200px; order:-1; justify-self:start; }
  .hero-grid .arch-wrap{ order:0; max-width:460px; }
}

/* ---------- systems architecture diagram (hero visual) ---------- */
.arch-wrap{ width:100%; }
.arch{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:20px; }
.arch-cap{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.arch-cap-tag{ color:var(--blue); background:var(--blue-soft); padding:3px 9px; border-radius:980px; letter-spacing:.02em; }
.arch-layer{ background:var(--surface-2); border:1px solid var(--line); border-radius:15px; padding:12px 13px; }
.arch-lyr-label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:9px; }
.arch-blocks{ display:flex; flex-wrap:wrap; gap:7px; }
.ab{ font-size:12px; font-weight:550; color:var(--ink); background:#fff; border:1px solid var(--line-strong);
  border-radius:9px; padding:7px 11px; line-height:1.25; white-space:nowrap; }
.ab-key{ background:var(--blue); color:#fff; border-color:var(--blue); }
.ab-side{ background:transparent; border-style:dashed; color:var(--ink-2); font-weight:500; }
.arch-flow{ height:22px; position:relative; }
.arch-flow::before{ content:""; position:absolute; top:0; bottom:3px; left:50%; transform:translateX(-50%); width:2px; background:var(--blue); opacity:.45; }
.arch-flow::after{ content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--blue); opacity:.6; }
.arch-note{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--surface);
  padding:0 9px; font-family:var(--mono); font-size:10px; color:var(--ink-3); white-space:nowrap; }

/* page header (work / about / contact) */
.page-head{ padding:clamp(56px,8vw,96px) 0 clamp(8px,3vw,24px); }
.page-head h1{ font-size:clamp(38px,6vw,64px); }
.page-head .lead{ margin-top:20px; max-width:56ch; }

/* ============================================================
   CARDS / GRID
   ============================================================ */
.card{
  background:var(--surface); border-radius:var(--r);
  box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.04);
}
.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.feature{
  padding:28px; display:flex; flex-direction:column; gap:12px;
  transition:transform .2s, box-shadow .2s;
}
.feature .ico{
  width:46px; height:46px; border-radius:13px;
  background:var(--blue-soft); color:var(--blue);
  display:grid; place-items:center;
}
.feature .ico svg{ width:23px; height:23px; }
.feature h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; }
.feature p{ font-size:15px; color:var(--ink-2); line-height:1.55; }

/* tag / chip */
.tag{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:12.5px; font-weight:550; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line);
  padding:6px 12px; border-radius:980px;
}
.tag-blue{ background:var(--blue-soft); border-color:transparent; color:var(--blue); }
.tag-live{ background:var(--green-soft); border-color:transparent; color:var(--green); }
.tag-live .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); }

/* ---------- headshot placeholder ---------- */
.avatar{
  width:100%; aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(120% 120% at 30% 20%, #eef1f6 0%, #e3e7ee 55%, #d8dde6 100%);
  border:1px solid var(--line);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.avatar .mono-init{ font-size:clamp(48px,9vw,84px); font-weight:600; color:#b6bcc7; letter-spacing:.01em; }
.avatar .hint{
  position:absolute; bottom:14px; font-size:11px; color:var(--ink-3);
  font-family:var(--mono); letter-spacing:.02em;
}

/* ============================================================
   FOOTER
   ============================================================ */
/* ---------- project cards (Work page) ---------- */
.proj{ padding:clamp(26px,3.6vw,42px); }
.proj-head{ display:flex; gap:18px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.proj h3{ font-size:clamp(22px,2.8vw,28px); font-weight:600; letter-spacing:-.02em; margin-top:16px; }
.proj p{ margin-top:12px; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:64ch; }
.proj-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; margin-top:24px;
}
.proj-meta > div{ background:var(--surface-2); padding:15px 17px; }
.proj-meta dt{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-3); }
.proj-meta dd{ margin:6px 0 0; font-size:14px; font-weight:550; color:var(--ink); }
@media (max-width:620px){ .proj-meta{ grid-template-columns:1fr; } }

/* ---------- about layout ---------- */
.about-grid{ display:grid; grid-template-columns:1.5fr .8fr; gap:48px; align-items:start; }
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; gap:34px; } }
.about-body p{ font-size:clamp(17px,1.9vw,19px); line-height:1.65; color:var(--ink-2); }
.about-body p + p{ margin-top:20px; }
.pullquote{ font-size:clamp(23px,3.2vw,32px); font-weight:600; letter-spacing:-.02em; line-height:1.28; color:var(--ink); text-wrap:balance; }
.facts{ padding:26px; }
.facts dt{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-3); margin-top:18px; }
.facts dt:first-child{ margin-top:0; }
.facts dd{ margin:5px 0 0; font-size:15px; font-weight:500; color:var(--ink); }
.facts a{ color:var(--blue); }

/* ---------- contact ---------- */
.contact-list{ display:grid; gap:14px; }
.contact-row{ display:flex; align-items:center; gap:18px; padding:22px 24px; transition:transform .18s, box-shadow .18s; }
.contact-row:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.contact-row .ico{ flex:none; width:48px; height:48px; border-radius:13px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; }
.contact-row .ico svg{ width:23px; height:23px; }
.contact-row .lab{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.02em; }
.contact-row .val{ font-size:clamp(16px,2vw,19px); font-weight:550; color:var(--ink); margin-top:3px; letter-spacing:-.01em; word-break:break-word; }
.contact-row .chev{ margin-left:auto; flex:none; color:var(--ink-3); transition:transform .18s, color .18s; }
.contact-row:hover .chev{ color:var(--blue); transform:translateX(3px); }

.footer{ border-top:1px solid var(--line); background:var(--surface); }
.footer-inner{
  max-width:var(--maxw); margin:0 auto; padding:40px 24px;
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
}
.footer .brand{ font-size:15px; }
.footer-links{ display:flex; flex-wrap:wrap; gap:22px; font-size:14px; color:var(--ink-2); }
.footer-links a:hover{ color:var(--ink); }
.footer-base{ border-top:1px solid var(--line); }
.footer-base .wrap{ padding-top:16px; padding-bottom:16px; font-size:13px; color:var(--ink-3); }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}