*{box-sizing:border-box}
body{margin:0;background:#fbfbfd;color:#1d1d1f;font-family:-apple-system,"Helvetica Neue",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#1d1d1f;text-decoration:none}

.page{min-height:100vh;display:flex;flex-direction:column}
.container{max-width:1280px;width:100%;margin:0 auto;padding-left:56px;padding-right:56px}
.gradient-text{background:linear-gradient(90deg,#1e5fb0,#4a9be8);-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:0 56px;height:60px;position:sticky;top:0;background:rgba(251,251,253,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:10;border-bottom:1px solid rgba(0,0,0,.06)}
.nav-brand{font-size:14px;font-weight:600;letter-spacing:.04em}
.nav-links{display:flex;gap:32px;align-items:center;font-size:13px}
.nav-links a{color:#424245}
.nav-links a:hover{color:#1d1d1f}
.nav-links a.active{color:#1d1d1f;font-weight:600}
.nav-links a.btn-contact{padding:7px 16px;background:#1d1d1f;color:#fff;border-radius:980px;font-weight:500}
.nav-links a.btn-contact:hover{background:#000;color:#fff}

/* home hero */
.hero{padding-top:88px;padding-bottom:72px;display:flex;flex-direction:column;gap:32px}
.hero h1{margin:0;font-size:clamp(48px,5.5vw,76px);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.hero .byline{margin:0;font-size:20px;color:#6e6e73;line-height:1.5;max-width:640px;text-wrap:pretty}
.hero-cards{display:flex;gap:18px;align-items:stretch}
.hero-card{background:#f5f5f7;border-radius:16px;padding:28px 30px;display:flex;flex-direction:column;gap:8px}
.hero-card.primary{flex:1.4}
.hero-card.secondary{flex:1}
.hero-card .eyebrow{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.hero-card .eyebrow.blue{color:#2a78d6}
.hero-card .eyebrow.gray{color:#86868b}
.hero-card.primary .title{font-size:23px;font-weight:600;line-height:1.3}
.hero-card.secondary .title{font-size:19px;font-weight:600;line-height:1.3}
.hero-card .meta{font-size:13px;color:#86868b}

/* writing section (home) */
.writing{padding-top:80px;padding-bottom:88px;display:flex;flex-direction:column;gap:8px}
.writing-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
.writing-head h2{margin:0;font-size:32px;font-weight:600;letter-spacing:-.02em}
.writing-head a{font-size:14px;color:#424245}
.writing-head a:hover{color:#1d1d1f}
.post-row{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-top:1px solid rgba(0,0,0,.1);gap:32px}
.post-row:last-of-type{border-bottom:1px solid rgba(0,0,0,.1)}
.post-row h3{margin:0;font-size:26px;font-weight:500;letter-spacing:-.015em}
.post-row:hover h3{color:#000}
.post-row .date{font-size:14px;color:#86868b;flex:none}

/* contact band */
.contact{background:#1d1d1f;color:#f5f5f7}
.contact-inner{padding-top:72px;padding-bottom:72px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.contact h2{margin:0;font-size:44px;font-weight:600;letter-spacing:-.02em}
.contact .sub{font-size:17px;color:#a1a1a6}
.contact-copy{display:flex;flex-direction:column;gap:10px}
.btn-pill{padding:13px 28px;background:#f5f5f7;color:#1d1d1f;border-radius:980px;font-size:15px;font-weight:500;flex:none}
.btn-pill:hover{background:#fff;color:#1d1d1f}

/* footer */
.footer{background:#1d1d1f;border-top:1px solid rgba(255,255,255,.12);margin-top:auto}
.footer-inner{padding-top:24px;padding-bottom:24px;display:flex;justify-content:space-between;align-items:center;font-size:12px}
.footer-inner .copyright{color:#6e6e73}
.footer-links{display:flex;gap:24px}
.footer-links a{color:#a1a1a6}
.footer-links a:hover{color:#fff}

/* page headers (About / Blog) */
.page-header{padding-top:88px;padding-bottom:48px;display:flex;flex-direction:column;gap:20px}
.page-header h1{margin:0;font-size:clamp(56px,7vw,96px);font-weight:700;letter-spacing:-.04em;line-height:.95}
.page-header .sub{margin:0;font-size:20px;color:#6e6e73;line-height:1.5;max-width:600px;text-wrap:pretty}

/* about bio */
.bio{padding-top:16px;padding-bottom:72px;display:grid;grid-template-columns:1fr 300px;gap:72px;align-items:start}
.bio-text{display:flex;flex-direction:column;gap:22px;max-width:680px}
.bio-text p{margin:0;font-size:19px;line-height:1.6;color:#6e6e73;text-wrap:pretty}
.bio-text p.lead{font-size:21px;color:#1d1d1f}
.bio-photo{width:300px;display:flex;flex-direction:column;gap:10px}
.bio-photo img{width:300px;height:360px;object-fit:cover;object-position:center 12%;border-radius:24px;display:block}
.bio-photo .credit{font-size:13px;color:#86868b;text-align:center}

/* about experience / education */
.band-alt{background:#f5f5f7}
.rows-section{padding-top:72px;padding-bottom:80px;display:flex;flex-direction:column;gap:8px}
.rows-section.on-white{padding-bottom:88px}
.rows-section h2{margin:0 0 24px;font-size:32px;font-weight:600;letter-spacing:-.02em}
.item-row{display:flex;justify-content:space-between;align-items:baseline;padding:20px 0;border-top:1px solid rgba(0,0,0,.1);gap:32px}
.item-row:last-child{border-bottom:1px solid rgba(0,0,0,.1)}
.item-row .name{font-size:24px;font-weight:600;letter-spacing:-.015em}
.item-row .detail{font-size:14px;color:#86868b;flex:none}

/* blog index */
.posts{padding-top:16px;padding-bottom:96px;display:flex;flex-direction:column;flex:1}
.year-group{display:grid;grid-template-columns:200px 1fr;gap:48px;padding-top:24px}
.year-group .year{font-size:24px;font-weight:600;letter-spacing:-.02em;align-self:start}
.year-posts{display:flex;flex-direction:column}
.blog-row{display:flex;justify-content:space-between;align-items:baseline;gap:32px;padding:24px 0;border-top:1px solid rgba(0,0,0,.1)}
.blog-row:last-child{border-bottom:1px solid rgba(0,0,0,.1)}
.blog-row-text{display:flex;flex-direction:column;gap:6px}
.blog-row h2{margin:0;font-size:26px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.blog-row:hover h2{color:#000}
.blog-row .summary{font-size:15px;color:#6e6e73;line-height:1.45;max-width:640px}
.blog-row .meta{font-size:14px;color:#86868b;flex:none}

/* mobile */
@media (max-width:768px){
  .nav{padding:0 24px}
  .container{padding-left:24px;padding-right:24px}
  .hero{padding-top:56px;padding-bottom:56px}
  .hero-cards{flex-direction:column}
  .bio{grid-template-columns:1fr;gap:40px}
  .year-group{grid-template-columns:1fr;gap:8px}
  .post-row h3,.blog-row h2{font-size:22px}
  .contact-inner{align-items:flex-start}
}