/* Hi, I'm Libby (About). Desktop measurements follow the Figma frame "Hi, I'm Libby" (1440 wide). */
.about{--muted:#5e574d;--rule:#ddd3c4;--gutter:clamp(16px,8.34vw,120px)}
.about main{max-width:1440px;margin:0 auto;padding:0 var(--gutter) 52px}
.about h1,.about h2,.about .job-title strong{font-family:var(--heading);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 1;margin:0}
.about p{margin:0}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:14px;line-height:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta);margin:0}
.eyebrow.small{font-size:13px;letter-spacing:.1em}

/* close × back to home, top right */
.page-close{position:fixed;top:60px;right:60px;z-index:5;display:block;width:20px;height:20px}
.page-close img{display:block;margin:-.875px}

/* buttons and links shared with the postcard */
.btn{display:inline-block;background:var(--black);color:var(--cream);font:600 16px/22px var(--body);padding:14px 26px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.btn:hover{background:#2c2a27}
.text-link{font:500 16px/22px var(--body);color:var(--black);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.text-link.strong{font-weight:600}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,620px) minmax(0,572px);justify-content:space-between;align-items:start;padding-top:76px;margin-right:-27px}
.intro{display:flex;flex-direction:column;gap:28px;margin-top:103px}
.intro h1{font-size:46px;line-height:54px;color:var(--black)}
.lede{font-size:20px;line-height:31px;color:var(--muted);max-width:580px}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.art{position:relative;aspect-ratio:572.4/674.56}
.art img{position:absolute;display:block;height:auto}
.art .pink{left:1.153%;top:0;width:98.85%}
.art .gold{left:74.04%;top:9.956%;width:22.66%}
.art .teal{left:0;top:87.6%;width:27.11%}
.art .portrait-fill{left:3.868%;top:6.16%;width:86.23%}
.art .portrait{left:3.868%;top:6.16%;width:85.91%}

.look-back{display:block;width:max-content;margin:92px 0 0 auto;font:500 12px/16px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.look-back:hover{color:var(--black)}

/* ---------- résumé glimpse ---------- */
.resume{margin-top:142px;scroll-margin-top:40px}
.resume-heading{display:flex;flex-direction:column;gap:10px;margin-bottom:48px}
.resume-heading h2{font-size:40px;line-height:48px}
.resume-cols{display:grid;grid-template-columns:minmax(0,744px) minmax(0,1fr);gap:96px;align-items:start}
.jobs{list-style:none;margin:0;padding:0}
.jobs li{display:flex;gap:28px;padding:22px 0;border-top:1px solid var(--rule)}
.jobs .years{flex:0 0 88px;font:400 14px/24px var(--mono);color:var(--muted)}
.jobs li div{display:flex;flex-direction:column;gap:6px;min-width:0}
.job-title{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
.job-title strong{font-size:22px;line-height:28px}
.job-title span{font-size:16px;line-height:22px;color:var(--muted)}
.jobs li p:not(.job-title){font-size:16px;line-height:24px}
.side{display:flex;flex-direction:column;gap:40px;align-items:flex-start}
.side h3{margin-bottom:14px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:500 14px/20px var(--body);padding:7px 14px;border-radius:999px}
.chips.pink li{background:var(--pink)}
.chips.green li{background:#e6e9d3}
.education{display:flex;flex-direction:column;gap:14px}
.education h3{margin-bottom:0}
.education p{font-size:16px;line-height:24px}

.footnote{margin-top:130px !important;font:400 13px/18px var(--mono);color:var(--muted)}

/* ---------- smaller screens ---------- */
@media (max-width:1180px){
  .side .text-link{white-space:normal}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:40px}
  .hero{margin-right:0}
  .intro{margin-top:60px}
  .br-wide{display:none}
  .resume-cols{grid-template-columns:minmax(0,1fr) minmax(240px,280px);gap:48px}
}
@media (max-width:860px){
  .page-close{top:20px;right:20px}
  .hero{grid-template-columns:1fr;padding-top:64px;gap:24px}
  .art{order:-1;width:min(78%,400px);justify-self:center}
  .intro{margin-top:0;gap:22px}
  .intro h1{font-size:clamp(32px,8.4vw,40px);line-height:1.18}
  .lede{font-size:18px;line-height:28px}
  .look-back{margin-top:56px}
  .resume{margin-top:56px}
  .resume-heading{margin-bottom:28px}
  .resume-heading h2{font-size:32px;line-height:40px}
  .resume-cols{grid-template-columns:1fr;gap:48px}
  .footnote{margin-top:72px !important}
}
@media (max-width:520px){
  .jobs li{flex-direction:column;gap:4px}
  .jobs .years{flex-basis:auto}
}