/* ===========================================================================
   Dr. Osi-Okeke Ugochukwu — personal site
   No frameworks, no CDN, no build step. Palette is drawn from the AI banner:
   near-black ground, cyan primary, gold and violet as supporting accents.
   =========================================================================== */

:root{
  --bg:#0a0b0f;
  --bg-alt:#0e1016;
  --surface:#14171f;
  --surface-2:#191d27;
  --line:#232838;
  --line-soft:#1b1f2b;

  --text:#e8eaf0;
  --text-dim:#a2abbf;
  --text-mute:#78819a;

  --cyan:#35d0e8;
  --gold:#d9a441;
  --violet:#8b7ff0;

  --focus:var(--cyan);
  --radius:14px;
  --radius-sm:9px;
  --gutter:clamp(1.25rem, 4vw, 2.5rem);
  --maxw:1180px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --shadow:0 18px 50px -28px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.25rem);font-weight:800}
h2{font-size:clamp(1.75rem,1.35rem + 1.9vw,2.6rem);font-weight:700}
h3{font-size:1.1875rem;font-weight:650}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

a{color:inherit}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--cyan);color:#04262c;padding:.7rem 1.1rem;font-weight:700;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:760px}

/* ------------------------------- header ------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.site-header.scrolled{border-bottom-color:var(--line-soft);background:color-mix(in srgb,var(--bg) 94%,transparent)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px}

.brand{display:inline-flex;align-items:center;min-height:44px;gap:.6rem;
  text-decoration:none;font-weight:750;letter-spacing:-.01em}
.brand-mark{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  font-size:.75rem;font-weight:800;letter-spacing:.02em;color:#04262c;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
}
.brand-dot{color:var(--cyan)}

.nav{display:flex;gap:.35rem}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;   /* tap target floor */
  text-decoration:none;color:var(--text-dim);font-size:.9375rem;font-weight:550;
  padding:.5rem .8rem;border-radius:8px;transition:color .18s ease,background .18s ease;
}
.nav a:hover{color:var(--text);background:var(--surface)}
.nav a.active{color:var(--cyan)}

.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:9px;
  width:44px;height:44px;cursor:pointer;color:var(--text);padding:0}
.menu-bars{display:grid;gap:4px;justify-items:center}
.menu-bars i{display:block;width:17px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .22s ease,opacity .22s ease}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ------------------------------- buttons ------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.7rem 1.35rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  color:var(--text);text-decoration:none;font-size:.9375rem;font-weight:600;
  cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.btn:hover{border-color:#31384c;background:var(--surface-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(135deg,var(--cyan),#4ab6f0);
  border-color:transparent;color:#04222a;font-weight:700;
}
.btn-primary:hover{background:linear-gradient(135deg,#4bdcf0,#5cc0f5)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* -------------------------------- hero -------------------------------- */
.hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:80%;pointer-events:none;
  background:
    radial-gradient(48% 55% at 22% 32%, color-mix(in srgb,var(--cyan) 17%,transparent), transparent 70%),
    radial-gradient(42% 48% at 78% 18%, color-mix(in srgb,var(--violet) 15%,transparent), transparent 70%),
    radial-gradient(38% 42% at 62% 70%, color-mix(in srgb,var(--gold) 8%,transparent), transparent 72%);
  filter:blur(8px);
}
.hero-grid{position:relative;display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}

.eyebrow{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-mute);margin:0 0 1rem;
}
.lede{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);color:var(--text-dim);max-width:54ch;margin:1.35rem 0 0}

.practice-tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.5rem 0 0;padding:0}
.practice-tags li{
  font-size:.8125rem;font-weight:600;letter-spacing:.01em;
  padding:.4rem .85rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-dim);
}
.practice-tags li:nth-child(1){border-color:color-mix(in srgb,var(--cyan) 34%,var(--line))}
.practice-tags li:nth-child(2){border-color:color-mix(in srgb,var(--violet) 34%,var(--line))}
.practice-tags li:nth-child(3){border-color:color-mix(in srgb,var(--gold) 34%,var(--line))}

.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

.social{display:flex;gap:.5rem;list-style:none;padding:0;margin:2rem 0 0}
.social a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-dim);
  transition:color .18s ease,border-color .18s ease,transform .18s ease;
}
.social a:hover{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,var(--line));transform:translateY(-2px)}
.social svg{width:18px;height:18px;fill:currentColor}

.hero-portrait{
  margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);
  background:linear-gradient(155deg,#1b2030,#0d1017);
  aspect-ratio:856/1200;
}
.hero-portrait img{width:100%;height:100%;object-fit:cover}

/* a missing upload should read as a considered empty frame, not a broken icon */
figure[data-fallback].is-missing img{display:none}
figure[data-fallback].is-missing{
  display:grid;place-items:center;min-height:220px;
  border-style:dashed;color:var(--text-mute);font-family:var(--mono);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:2rem;
}
figure[data-fallback].is-missing::after{content:attr(data-missing-label)}

/* ------------------------------ sections ------------------------------ */
.section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.section-alt{background:var(--bg-alt);border-block:1px solid var(--line-soft)}
.section-head{max-width:62ch;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head p{color:var(--text-dim);margin-top:.9rem}

/* -------------------------------- cards ------------------------------- */
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.75rem 1.6rem;transition:border-color .2s ease,transform .2s ease;
}
.card:hover{border-color:#2e3547;transform:translateY(-3px)}
.card h3{margin:1rem 0 .6rem}
.card p{color:var(--text-dim);font-size:.9375rem}
.card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line)}
.card-icon svg{width:21px;height:21px;fill:var(--cyan)}
.cards .card:nth-child(2) .card-icon svg{fill:var(--violet)}
.cards .card:nth-child(3) .card-icon svg{fill:var(--gold)}

/* ------------------------------- projects ------------------------------ */
/* Wider than the design tiles: software is the headline, so it gets the room. */
.proj-grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.proj{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.proj:hover{border-color:#39415a;transform:translateY(-4px);box-shadow:var(--shadow)}
.proj-media{
  display:block;aspect-ratio:16/10;min-height:0;flex:none;overflow:hidden;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.proj-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.proj-body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;gap:.55rem}
.proj-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.proj-head h3{font-size:1.3125rem}
.proj-head a{display:inline-flex;align-items:center;min-height:44px;   /* tap target floor */
  text-decoration:none;background-image:linear-gradient(var(--cyan),var(--cyan));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .25s ease,color .2s ease}
.proj-head a:hover{color:var(--cyan);background-size:100% 1px}
.proj-live{
  flex:none;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 34%,var(--line));
  border-radius:999px;padding:.2rem .55rem;
}
.proj-kind{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-mute);margin:0}
.proj-body>p{margin:0;color:var(--text-dim);font-size:.9375rem}
.proj-tech{
  font-size:.8438rem;color:var(--text-mute);border-left:2px solid var(--line);
  padding-left:.9rem;margin-top:.25rem
}
.proj-tech em,.proj-body em{color:var(--text-dim);font-style:italic}
.proj-body code{font-family:var(--mono);font-size:.8125rem;color:var(--cyan);
  background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;padding:.05rem .3rem}

/* --------------------------------- work ------------------------------- */
.work-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.work{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.work:hover{border-color:#323a4e;transform:translateY(-4px);box-shadow:var(--shadow)}
.work-media{
  aspect-ratio:16/10;display:grid;place-items:center;padding:1.5rem;
  background:var(--surface-2);border-bottom:1px solid var(--line);
  /* .work is a flex column, so min-height:auto would let a tall mark override the
     aspect-ratio and leave every tile a different height. */
  min-height:0;flex:none;overflow:hidden;
}
/* marks drawn for light or dark grounds get shown on the ground they were drawn for */
.work-media.surface-light{background:#f4f5f7}
.work-media.surface-dark{background:#000}
.work-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.work-body{padding:1.35rem 1.5rem 1.6rem}
.work-body h3{margin-bottom:.3rem}
.work-kind{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 .8rem;
}
.work-body p:last-child{color:var(--text-dim);font-size:.9063rem;margin:0}

/* ------------------------------- quotes ------------------------------- */
.quotes{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.quote{
  margin:0;padding:1.75rem 1.6rem;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:1.25rem;
}
.quote blockquote{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--text)}
.quote blockquote::before{content:"\201C";color:var(--cyan);font-size:2rem;line-height:0;
  vertical-align:-.35rem;margin-right:.15rem}
.quote figcaption{display:flex;align-items:center;gap:.85rem;margin-top:auto;
  font-weight:650;font-size:.875rem;letter-spacing:.02em}
.quote figcaption img{
  width:44px;height:44px;border-radius:10px;object-fit:contain;
  background:#f4f5f7;padding:5px;flex:none;
}

/* -------------------------------- about ------------------------------- */
.about-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
/* Shares portrait.jpg with the hero. A wide crop biased to the upper third keeps the
   face in frame and reads as a second shot rather than a repeat of the same one. */
.about-media{margin:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);background:#05060a;
  aspect-ratio:5/4}
.about-media img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.about-copy h2{margin-bottom:1.25rem}
.about-copy p{color:var(--text-dim)}
.about-copy strong{color:var(--text);font-family:var(--mono);font-size:.9375rem;letter-spacing:.01em}
.about-copy .btn{margin-top:1.25rem}

/* --------------------------------- form ------------------------------- */
.form{display:grid;gap:1.1rem}
.field-row{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr;margin:0}
.field{display:grid;gap:.45rem;margin:0}
.field label{font-size:.8125rem;font-weight:650;letter-spacing:.03em;color:var(--text-dim)}
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--text);
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.8rem .95rem;transition:border-color .18s ease,background .18s ease;
}
.field textarea{resize:vertical;min-height:140px}
.field input:hover,.field textarea:hover{border-color:#2c3346}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);
  background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 16%,transparent)}
.field.invalid input,.field.invalid textarea{border-color:#e0575f}

.err{font-size:.8125rem;color:#f08a90;min-height:1.1em}
.err:empty{min-height:0}

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0}

.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.35rem}
.form-status{margin:0;font-size:.9063rem;color:var(--text-dim)}
.form-status.ok{color:#5fd6a4}
.form-status.bad{color:#f08a90}
.form-status a{color:var(--cyan)}

/* -------------------------------- footer ------------------------------ */
.site-footer{border-top:1px solid var(--line-soft);background:var(--bg-alt);
  padding:2rem 0;color:var(--text-mute);font-size:.875rem}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.footer-inner p{margin:0}
.footer-meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.to-top{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);color:var(--text-dim);
  transition:color .18s ease,transform .18s ease}
.to-top:hover{color:var(--cyan);transform:translateY(-2px)}
.to-top svg{width:20px;height:20px;fill:currentColor}

/* ------------------------------ responsive ---------------------------- */
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr}
  /* Name and lede lead; the portrait follows. Putting a tall image first cost a full
     screen of scrolling before the visitor learned whose site this is. */
  .hero-portrait{max-width:340px;max-height:60vh;justify-self:start}
  .about-grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  .menu-btn{display:grid;place-items:center}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;padding:.5rem var(--gutter) 1rem;
    background:var(--bg);border-bottom:1px solid var(--line);
    display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:.85rem .25rem;border-radius:0;border-bottom:1px solid var(--line-soft)}
  .nav a:hover{background:none}
  .nav a:last-child{border-bottom:none}
  .header-inner{position:relative}
  .field-row{grid-template-columns:1fr}
  .footer-inner{justify-content:center;text-align:center}
}