:root{--paper:#F6F3EE;--ink:#1E1A1B;--body:#3E3836;--muted:#6B635F;--faint:#8A817C;--accent:#8C3140;--rose:#E7A3A9;--line:rgba(30,26,27,.14)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Public Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
::selection{background:var(--accent);color:var(--paper)}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;letter-spacing:-.03em}
.mono{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--faint)}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid rgba(30,26,27,.1)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;min-height:68px;padding-top:12px;padding-bottom:12px}
.brand{font-family:'Space Grotesk',sans-serif;font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.brand strong{font-weight:500}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.nav a{font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--ink)}

/* hero */
.hero{padding-top:clamp(48px,6vw,84px)}
.hero-grid{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);align-items:flex-start}
.hero-copy{flex:1 1 460px;min-width:0}
/* Right column: photo + languages centred over the two buttons, which set
   the column's width (side by side, never wrapped) — margin-top nudges the
   whole block down to line up with h1 rather than the eyebrow above it */
.hero-right{flex:0 0 auto;margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-photo{display:flex;flex-direction:column;align-items:center}
.hero-photo img{aspect-ratio:1/1;object-fit:cover;border-radius:50%;width:220px}
.hero-right .cta-row{flex-wrap:nowrap}
/* Languages on one line, width matching the button row beneath them —
   the mobile About-section copy keeps its own roomier, wrapped .langs spacing */
.hero-right .langs{gap:6px;margin-top:12px;flex-wrap:nowrap}
.eyebrow{display:flex;align-items:center;margin-bottom:28px;flex-wrap:wrap}
.eyebrow span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
h1{font-weight:400;font-size:clamp(38px,6.2vw,72px);line-height:1.03;letter-spacing:-.04em;margin:0 0 28px}
h1 em{font-style:normal;font-weight:500;color:var(--accent)}
.lede{font-size:19px;line-height:1.6;color:var(--body);max-width:30em;margin:0 0 20px;text-wrap:pretty}
.meta{font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 36px}
.meta .nowrap{white-space:nowrap}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-lg{font-size:15px;font-weight:500;padding:14px 26px;border-radius:2px}
.btn-solid{color:var(--paper);background:var(--ink)}
.btn-solid:hover{background:var(--accent);color:var(--paper)}
.btn-ghost{color:var(--ink);border:1px solid rgba(30,26,27,.25)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(30,26,27,.04)}
.langs{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap}
.langs div{display:flex;align-items:baseline;gap:7px;font-size:14px;font-weight:500}
.langs em{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400}

/* metrics */
.metrics-band{margin-top:clamp(32px,4vw,56px)}
.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:1px;background:rgba(30,26,27,.13)}
.metric{background:var(--paper);padding:32px 26px}
.metric b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:clamp(38px,4.2vw,50px);line-height:1;letter-spacing:-.035em;margin-bottom:12px}
.metric b span{font-size:30px;color:var(--accent)}
.metric p{font-size:13.5px;line-height:1.5;color:var(--body);margin:0}
.metric small{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:7px}

/* sections */
section.band{padding-top:clamp(64px,9vw,120px)}
.split{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,72px)}
.gutter{flex:0 1 220px}
.gutter .mono{padding-top:14px;display:block;font-weight:500;color:var(--accent)}
.col{flex:1 1 480px;min-width:0}
h2{font-weight:400;font-size:clamp(30px,4vw,42px);line-height:1.14;letter-spacing:-.03em;margin:0 0 32px;max-width:24em}
.prose p{font-size:18px;line-height:1.68;color:var(--body);margin:0 0 22px;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600;color:var(--ink)}
.triad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:1px;background:var(--line);margin-top:48px}
.triad div{background:var(--paper);padding:22px 20px}
.triad b{display:block;font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:500;letter-spacing:-.02em;margin-bottom:6px}
.triad p{font-size:13px;line-height:1.5;color:var(--muted);margin:0}

/* projects */
.projects{margin-top:16px;border-top:1px solid var(--line)}
.project{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,72px);padding:36px 0;border-bottom:1px solid var(--line)}
.project:hover{background:rgba(140,49,64,.045)}
.project .aside{flex:0 1 220px}
.project .aside .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.project .aside .org{font-size:14px;color:var(--faint)}
.project .body{flex:1 1 460px;min-width:0;max-width:40em}
.project h3{font-weight:500;font-size:clamp(23px,2.9vw,28px);line-height:1.18;letter-spacing:-.025em;margin:0 0 20px}
.pmedia{margin:0 0 24px}
.pmedia video{width:100%;aspect-ratio:16/9;border-radius:6px;border:1px solid var(--line);background:var(--ink);display:block}
.pcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:26px 40px}
.plabel{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.pcols p{margin:0;text-wrap:pretty}
.pwhat{font-size:14.5px;line-height:1.6;color:var(--muted)}
.prole{font-size:16px;line-height:1.6;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.chips span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:rgba(140,49,64,.07);padding:5px 10px;border-radius:2px}

/* Featured project — hero of the section */
.project.featured{
  flex-direction:column; flex-wrap:nowrap;
  background:rgba(140,49,64,.035);
  border:1px solid rgba(140,49,64,.16);
  border-bottom:1px solid rgba(140,49,64,.16);
  border-radius:10px;
  padding:32px;
  margin-bottom:8px;
}
.project.featured:hover{background:rgba(140,49,64,.05)}
.featured-badge{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:18px;
}
.project.featured .aside{flex:none; display:flex; align-items:baseline; gap:14px; margin-bottom:4px}
.project.featured .body{max-width:none; width:100%}
.project.featured h3{font-size:clamp(25px,3.2vw,32px)}
.project.featured .pmedia video{aspect-ratio:16/10}

/* experience */
.role{display:flex;flex-wrap:wrap;gap:10px 32px;padding:28px 0;border-top:1px solid var(--line)}
.role .when{flex:0 0 140px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.5;color:var(--muted);padding-top:5px}
.role .rbody{flex:1 1 320px;min-width:0}
.role h3{font-weight:500;font-size:23px;line-height:1.22;letter-spacing:-.02em;margin:0 0 6px}
.role .org{font-size:14px;color:var(--muted);margin-bottom:12px}
.role p{font-size:16px;line-height:1.6;color:var(--body);margin:0;max-width:38em;text-wrap:pretty}
.earlier{margin-top:44px}
.earlier .mono{margin-bottom:4px;display:block}
.erow{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(30,26,27,.1)}
.erow .when{flex:0 0 140px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--faint)}
.erow .what{flex:1 1 200px;font-size:15.5px;font-weight:500}
.erow .org{font-size:14px;color:var(--muted)}

/* expertise */
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:36px 56px}
.skills h3{font-family:'Public Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:0;padding-bottom:12px;border-bottom:1px solid rgba(30,26,27,.2);margin:0 0 16px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-size:13.5px;color:var(--body);border:1px solid rgba(30,26,27,.18);padding:6px 12px;border-radius:2px;background:rgba(255,255,255,.5)}

/* contact */
.contact{margin-top:clamp(80px,10vw,130px);background:var(--ink);color:var(--paper)}
.contact .wrap{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.contact-grid{display:flex;flex-wrap:wrap;gap:clamp(40px,5vw,72px);align-items:flex-start}
.contact-copy{flex:1 1 420px;min-width:0}
.contact h2{font-weight:400;font-size:clamp(33px,4.4vw,50px);line-height:1.08;letter-spacing:-.035em;margin:0 0 24px}
.contact h2 em{font-style:normal;font-weight:500;color:var(--rose)}
.contact-copy p{font-size:16px;line-height:1.6;color:rgba(246,243,238,.66);margin:0;max-width:30em}
.contact-links{flex:1 1 320px;min-width:0;display:flex;flex-direction:column}
.contact-links a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;border-top:1px solid rgba(246,243,238,.2);color:var(--paper);font-size:17px}
.contact-links a:last-child{border-bottom:1px solid rgba(246,243,238,.2)}
.contact-links a:hover{color:var(--rose)}
.contact-links span{font-family:'IBM Plex Mono',monospace;font-size:13px;color:rgba(246,243,238,.6)}
.foot{margin-top:72px;padding-top:28px;border-top:1px solid rgba(246,243,238,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(246,243,238,.5)}

/* Photo lives in the hero on desktop/tablet; the About copy carries a mobile-only one */
.about-media{display:none}

/* ============ Responsive: tablet ============ */
@media (max-width: 900px){
  .hero-grid{align-items:flex-start}
  .hero-right{margin-top:38px}
}

/* ============ Responsive: phone ============ */
@media (max-width: 640px){
  /* Header: brand on its own row, nav wraps neatly beneath it */
  .site-head .wrap{flex-direction:column;align-items:flex-start;gap:12px}
  .nav{width:100%;gap:12px 16px}
  .nav a{font-size:13px}

  /* Hero: cap the portrait to a sensible avatar size, tighten spacing */
  .hero{padding-top:28px}
  .hero-grid{gap:28px}
  /* Photo moves out of the hero and into the About section on phones;
     hero-right collapses to just the buttons, full width, right after the text */
  .hero-photo{display:none}
  .hero-right{flex-basis:100%;margin-top:0;gap:0;align-items:flex-start}
  .hero-right .cta-row{flex-wrap:wrap}
  .about-media{display:flex;flex-direction:column;align-items:flex-start;margin:4px 0 30px}
  .about-media img{width:170px;aspect-ratio:1/1;object-fit:cover;border-radius:50%}
  .about-media .langs{margin-top:16px}
  h1{font-size:clamp(32px,9vw,44px);margin-bottom:22px}
  .lede{font-size:17px}
  .meta{margin-bottom:28px}

  /* Metrics: number and copy sit side by side instead of stacked, except
     "1,000+" whose extra digit would throw off alignment with the rest */
  .metric{display:flex;align-items:center;gap:16px;padding:20px 18px}
  .metric b{margin-bottom:0;flex:0 0 auto;font-size:clamp(30px,11vw,38px)}
  .metric-stack{display:block}
  .metric-stack b{margin-bottom:12px}

  /* BI / UX / AI: single column so there is no empty 4th cell */
  .triad{grid-template-columns:1fr}

  /* Section labels span full width above their content */
  .split{gap:16px}
  .gutter{flex-basis:100%}
  .gutter .mono{padding-top:0}

  /* Projects: tag/org stack above the description */
  .project{gap:14px}
  .project .aside{flex-basis:100%}

  /* Experience: date sits above each entry, earlier rows stack cleanly */
  .role .when{flex-basis:100%}
  .erow{gap:2px 16px}
  .erow .when{flex-basis:100%}
  .erow .what,.erow .org{flex-basis:auto}

  /* Contact */
  .contact-links a{font-size:16px}
}